#javascript #jquery #reactjs #dynamic #dropdown
Вопрос:
Я использую bootstrap и jquery в своем проекте react. У меня есть кнопка, при нажатии на которую должно измениться выпадающее поле. Выпадающий список работает, если я ставлю его нормально, но как только я вызываю его динамически, он больше не работает. Вот мой код:
Когда я использую его вот так, он работает
<div className="profile-otr">
<a className="profile-inr click-open3">
<img
className="creator"
src="../assets/img/favicon-32.png"
alt="creator"
/>
<p className="price body-sb">{ellipseAddress(address)}</p>
</a>
<div className="icon-hover-2 click-event3">
<h5 className="heading heading-h5">The Lucky Being</h5>
<div className="copy-icon-otr">
<p className="desc body-s">{ellipseAddress(address)}</p>
<svg
className="copy-icon"
width="18"
height="18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.636 12.636H15a2 2 0 002-2V3a2 2 0 00-2-2H7.364a2 2 0 00-2 2v2.364"
stroke="#CFCFCF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.636 5.364H3a2 2 0 00-2 2V15a2 2 0 002 2h7.636a2 2 0 002-2V7.364a2 2 0 00-2-2z"
stroke="#CFCFCF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="box-otr">
<div className="img-otr">
<img
className="img-eht"
src="../assets/img/ethereum.png"
alt="img"
/>
</div>
<div className="price-otr">
<p className="desc body-s">Current Balance</p>
<h5 className="heading heading-h5">3.067 ETH</h5>
</div>
</div>
<ul className="link-profile-otr">
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Profile
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Items
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Manage Funds
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Disconnect
</a>
</li>
</ul>
</div>
</div>
Но когда я устанавливаю условный оператор, как это, Он больше не работает
{!address ? (
<div className="action-otr">
<a onClick={connect} className="btn-fill btn-wallet">
Connect Wallet
</a>
</div>
) : (
<div className="profile-otr">
<a className="profile-inr click-open3">
<img
className="creator"
src="../assets/img/favicon-32.png"
alt="creator"
/>
<p className="price body-sb">{ellipseAddress(address)}</p>
</a>
<div className="icon-hover-2 click-event3">
<h5 className="heading heading-h5">The Lucky Being</h5>
<div className="copy-icon-otr">
<p className="desc body-s">{ellipseAddress(address)}</p>
<svg
className="copy-icon"
width="18"
height="18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.636 12.636H15a2 2 0 002-2V3a2 2 0 00-2-2H7.364a2 2 0 00-2 2v2.364"
stroke="#CFCFCF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.636 5.364H3a2 2 0 00-2 2V15a2 2 0 002 2h7.636a2 2 0 002-2V7.364a2 2 0 00-2-2z"
stroke="#CFCFCF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="box-otr">
<div className="img-otr">
<img
className="img-eht"
src="../assets/img/ethereum.png"
alt="img"
/>
</div>
<div className="price-otr">
<p className="desc body-s">Current Balance</p>
<h5 className="heading heading-h5">3.067 ETH</h5>
</div>
</div>
<ul className="link-profile-otr">
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Profile
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
My Items
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Manage Funds
</a>
</li>
<li className="link-profile-inr">
<span className="circle-hover"></span>
<a href="#" className="profile body-sb">
Disconnect
</a>
</li>
</ul>
</div>
</div>
)}
Это мой код jQuery:
$(document).ready(function () {
$(".click-open3").click(function () {
$(".click-event3").toggleClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event1").removeClass("displayblock");
});
$(".click-open2").click(function () {
$(".click-event2").toggleClass("displayblock");
$(".click-event3").removeClass("displayblock");
$(".click-event1").removeClass("displayblock");
});
$(".click-open1").click(function () {
$(".click-event1").toggleClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event3").removeClass("displayblock");
});
$(".burger-click").click(function () {
$(".click-event1").removeClass("displayblock");
$(".click-event2").removeClass("displayblock");
$(".click-event3").removeClass("displayblock");
});
});
Я искал в Интернете и читал разные статьи и решения для переполнения стека, но, похоже, ни одно из них не работает, и мне нужна помощь, пожалуйста.
Комментарии:
1. поиск «как добавлять события в динамически добавляемые элементы»
2. кроме того, этот код будет намного чище
3. @MuhammadUsman Я уже искал это, и как вы имеете в виду очиститель?
Ответ №1:
Вы можете использовать fadeToggle jQuery вместо переключения class
$("[class^='.click-'], .burger-click").click(function() {
$(YOUR_ELEMENT).fadeToggle();
});