0
$("#add-btn-text").click(function(){
\t var $that = $(this),
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),
\t \t
$boxWithSameClass = $(".li."+theDynamicClass);
\t $boxWithSameClass.toggleClass("hide-me added");
\t
});.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div class="col-md-4 label-wrap">
\t <h1 class="top-service">header</h1>
\t \t <ul class="li-wrap">
\t \t \t <li class="hide-me add-btn point dynamicClass1" id="1a">lorem 1</li>
\t \t \t <li class="hide-me add-btn point dynamicClass2">lorem 2</li>
\t \t \t <li class="hide-me add-btn point dynamicClass3">lorem 3</li>
\t \t \t </ul>
</div>
<div class="row row-centered">
\t <div class="col-md-4 col-centered service-detail">
\t \t <h2>lorem 1</h2>
\t \t <h3>subhead</h3>
\t \t \t <p>some text</p>
\t </div>
\t <div class="col-md-2 col-centered service-detail service-pos">
\t \t <ul class="service-btn-2">
\t \t \t <li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
\t \t \t <li><button type="button" class="btn btn-primary">other button</button></li>
\t \t </ul>
\t </div>
</div>
</body>
</html>を持つ要素を検索すると、私はボタンを備えたいくつかののdivのを持っています。クリックするたびに、ボタンと同じクラスのliにクラスが追加されます。
解決策を探して見つけましたが、それはうまくいくと思いますが、うまく機能しません。
jqueryの-コード：
$("#add-btn-text").click(function(){
var $that = $(this),
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),
$boxWithSameClass = $(".li."+theDynamicClass);
$boxWithSameClass.toggleClass("hide-me added");
});
uは、ボタンをクリックした場合、私は、それを理解したように、動的クラスは他のクラスをフィルタリングし、葉のみそれぞれに異なっている、一つの「ダイナミック」ボタン。次に、boxWithSameClassは、他のdivのliを識別します。divは、同じ「動的」クラスを持ち、必要な/望ましくないクラスをliに追加/削除します。
私は正しいですか？私は理解していない、なぜそれが動作していない。
HTMLコードBUTTON：
<div class="col-md-2 col-centered service-detail service-pos">
<ul class="service-btn-2">
<li><button type="button" class="btn btn-primary exp" id="add-btn-text">Hinzufügen</button></li>
<li><button type="button" class="btn btn-primary">Details</button></li>
</ul>
</div>
</div>
HTMLコードLIST：
<div class="col-xs-12">
<ul>
<li class="exp">Exposés</li>
<li>Textdesign</li>
<li>Anzeigenkampagnen</li>
<li>Geschäfts- und Presseberichte</li>
<li>Bautafelgestaltung</li>
<li>Außenwerbung</li>
</ul>
</div>
CSS：また
.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}
、私は何をしようとしていることである。
ユーザーは別のli、whをクリックできますichが強調表示されます。強調表示されたすべてのliは、フォームによって転送されます。つまり、顧客は露出を望んでいるので、今すぐ見ることができる露出をクリックします。 これで、お客様はバイアンプフォームに記入して送信します。すべての強調表示された李はそれと共に送ってください。
これは可能ですか？私はこのトピックに関するスレッドを見つけるために何を検索すべきかわかりません。 これは追加質問です。誰かが私にヒントを与えることができたらうれしい。 ;）
あなたはそれのためのフィドルを提供してくださいできますか？ –