jQuery的：過濾器類和搜索元素與同一類

$("#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的使用按鈕。點擊每個按鈕應該添加一個類與按鈕相同的類鋰。

我搜索並找到了一個我認爲合適的解決方案，但是我無法完成它的工作。

的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，它具有相同的「動態」類，並向li添加/刪除想要/不想要的類。

對嗎？我不明白，爲什麼它不起作用。

HTML-Code按鈕：

<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的代碼清單：

<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這將突出顯示。所有突出顯示的li都將被轉移一個表格。這意味着，客戶想要獲得展示，因此他點擊了現在可見的展示。現在，客戶填寫完整的表單併發送。每一個突出的李應該與它一起發送。

這可能嗎？我不知道我應該尋找什麼來尋找關於這個話題的線索。這只是一個額外的問題。如果有人能給我一個提示，會很高興。 ;）

來源

2016-07-15 Buntstiftmuffin

您能否爲此提供小提琴？ –

嘗試這個JS FIddle

$('.service-btn-2').on('click','button', function(){ 
    var btn_class = $(this).attr('class').split(" "); 
$('.whatever').find('.'+btn_class[0]).toggleClass("hide-me");

}）;

點擊按鈕，你想切換一個類與同班同學。如果不正確，請更正我:)

來源

2016-07-15 10:45:56

就這麼簡單。謝謝。我只需要確定，不同的li上的不同類別在第一個位置。我對嗎？ – Buntstiftmuffin

每個帶突出顯示的li的ul都有一個標題h1。李現在正確切換，並且此外我想要在同一個div內最接近此li的h1添加一個類。我的代碼 '$（ '服務BTN-2 '）。在（' 點擊'， '按鈕'，函數（）{' \t \t \t'變種btn_class = $（本）.attr（「類'）.split（「」）;' \t \t'$（'。label-wrap ul'）。find（'。'+ btn_class [0]）。toggleClass（「hide-me added」）;' \t （''top-added'，$ wrap。''）。$ wrap.find（'h1'）。toggleClass（'top-added'，$ wrap。''）$ wrap.find（'h2'）。找到（'。added'）.length> 0）;' \t \t}）;' 但現在3 div的每個頭都得到這個添加類..爲什麼？ – Buntstiftmuffin

是的，先生，你是對的:)如果你認爲這是正確的答案請接受答案。爲此，您可以簡單地添加該行，如https://jsfiddle.net/xxb7fd8q/9/： $（'。whatever'）。find（'。'+ btn_class [0]）。closest（'div' ）.find（ 'H1'）addClass（ '激活'）。 –

您的按鈕的HTML是這個

<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>

你dynamicclass="dynamicClass1"而不是在class屬性具有動態類值。但在你的jQuery中，你試圖從類屬性中獲取動態值，這是錯誤。

你的錯誤。

classes = $that.attr('class'), 
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),

更改您的邏輯來讀取來自data屬性像下面

theDynamicClass = $that.data('dynamicclass');

另外，toggleClass參數是不正確的動態類，你必須通過一個參數/類

所以你的最終功能代碼將如下所示。

$("#add-btn-text").click(function(){ 
     var $that = $(this); // make sure you end each line with a ; 
     theDynamicClass = $that.data('dynamicclass'); 

     $boxWithSameClass = $("li."+theDynamicClass); 

     $boxWithSameClass.toggleClass("hide-me").toggleClass("added"); 
});

希望這有助於

編輯1：有在選擇$(".li."+theDynamicClass)多了一個錯誤，它應該是$("li."+theDynamicClass)注意存在li之前沒有.。下面的工作演示另外我已經將jquery更改爲最新版本2.1.1。如果你想出於某種原因使用舊版本本身，那麼你必須將代碼更改爲

theDynamicClass = $that.attr('data-dynamicclass');由於data屬性只在1.4.3版本之後纔出現。

$("#add-btn-text").click(function(){ 
 
    debugger; 
 
    var $that = $(this); // make sure you end each line with a ; 
 
    theDynamicClass = $that.data('dynamicclass'); 
 

 
    $boxWithSameClass = $("li."+theDynamicClass); 
 

 
    $boxWithSameClass.toggleClass("hide-me").toggleClass("added"); 
 
});

.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/2.1.1/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>

來源

2016-07-15 10:45:22

這真是我的錯。但它還沒有工作。它說：$ boxWithSameClass沒有定義。與動態類和最後一行一樣。不知道爲什麼... *？* – Buntstiftmuffin

我買了一個模板，它基於jQuery的舊版本。嗯，如果我想更新，我必須只改變版本嗎？舊的腳本會繼續運行嗎？ – Buntstiftmuffin

是的，它的大部分必須工作......有少數東西已被棄用的版本變化..這將是更好的，如果你可以聯繫模板傢伙，並要求更新的版本..如果他們仍然支持模板開發可能他們會有一個新版本..最好有一個支票.. –

jQuery的：過濾器類和搜索元素與同一類

回答

相關問題