匹配元素由類的數組，並只顯示匹配所有數組元素的值

我在下面的功能最初被設計爲選中多個複選框，看看他們是否進行了檢查，然後顯示與匹配的那些類的任何<p id="com"> 「選中」複選框。正如你所看到的，每次點擊一個複選框時都會運行該功能。匹配元素由類的數組，並只顯示匹配所有數組元素的值

function Checked() { 
    var classes = []; 
    $('input:checked').each(function(){ 
    classes.push($(this).attr('class')); 
    }); 
    $('p#com').hide(); 
    for (var i = 0; i < classes.length; i++) { 
    if ($('p#com').hasClass(classes[i])){ 
    $('p.'+classes[i]).show(); 
    } 
    } 
} 
Checked(); 
$(':checkbox').click(Checked);

該條件現在已經改變，並且還有更多所需的選項類別。我現在擁有的是4組單選按鈕。因此最多有4個可能的檢查值，但是我想只顯示<p id="com">，它們的類只與所有數組值相匹配。例如

電臺1 - 定義鍵入

收音機2 - 定義完成

我想調整功能，以顯示匹配類型和完成，只有類，而不是兩個類型，當它目前分別完成確實。我基本卡住了，不知道該從哪裏出發，任何幫助將不勝感激。

新的HTML是這樣的。

<div> 
    Type<br /> 
    <input type="radio" name="type" class="manual" />Manual<br /> 
    <input type="radio" name="type" class="modern" />Modern<br /> 
    <input type="radio" name="type" class="thermo" />Thermostatic<br /> 
    <input type="radio" name="type" class="trad" />Traditional 
</div> 
<div> 
    Finish<br /> 
    <input type="radio" name="finish" class="chrome" />Chrome<br /> 
    <input type="radio" name="finish" class="antbrass" />Antique Brass<br /> 
    <input type="radio" name="finish" class="golbra" />Brass - Gold 
</div> 
    <p class="antbrass manual trad" id="com">Content</p> 
    <p class="manual modern chrome" id="com">Content</p> 
    <p class="antbrass manual trad" id="com">Content</p> 
    <p class="manual modern chrome" id="com">Content</p>

來源

2012-01-17 dajoto

你可以發佈HTML以配合它嗎？ –

@anthony錯過了您關於5次抱歉的意見，現在編輯它 – dajoto

應該是很容易，如果你從正確的角度來看一下吧：

var classSelector = $("input:checked") 
        .map(function() { return $(this).attr('class'); }) 
        .get().join('.'); 
$("p." + classSelector).show();

這樣做是什麼讓選中的複選框的帶班例如列表X，Y和Z併產生一個形式爲"X.Y.Z"的字符串。用選擇器"p.X.Y.Z"選擇元件然後將選擇你感興趣的那個。

See it in action。

讓我還指出，給予多個元素相同id像你這裏做的是錯誤的。在DOM中，ID應該是唯一的。如果你想「標籤」多個項目，這樣就可以對它們作爲一組進行操作，只是給他們一個類來代替，例如：

<p class="com antbrass manual trad">Content</p> 
<p class="com manual modern chrome">Content</p> 
<p class="com antbrass manual trad">Content</p> 
<p class="com manual modern chrome">Content</p>

這不以任何方式影響上述溶液。

來源

2012-01-17 14:50:45 Jon

感謝喬恩，這是我的專業，使得工作變得更加容易。我會離開正確的！ – dajoto

匹配元素由類的數組，並只顯示匹配所有數組元素的值

回答

相關問題