jquery顯示/隱藏多個divs組

我有一個jQuery顯示和隱藏div，它只用一組div就可以很好地工作。但是現在我想擁有多組這些div，並顯示每個組的第一個div，即使您更改了另一個組的單選按鈕。但是，我改變另一個組中的單選按鈕後，似乎無法讓腳本顯示每個組的第一個div。jquery顯示/隱藏多個divs組

繼承人我的JavaScript

<script type="text/javascript"> 
window.onload = function() { 
    $('.content').each(function() { 
     $('.trigger').change(function() { 
      $('.content').hide(); 
      $('.' + $(this).data('rel')).show(); 
     }); 
    }); 

    $('input[type=radio]:first', this).attr('checked', true); 
}; 
</script>

這裏是我的HTML

<div class="element"> 
    <input type="radio" name="group1" class="1 trigger" data-rel="1" /> 
    <input type="radio" name="group1" class="2 trigger" data-rel="2" /> 
    <input type="radio" name="group1" class="3 trigger" data-rel="3" /> 
    <input type="radio" name="group2" class="4 trigger" data-rel="4" /> 

</div> 
<div id="firstgroup"> 
    <div class="1 content">text 1</div> 
    <div class="2 content">text 2</div> 
    <div class="3 content">text 3</div> 
    <div class="4 content">text 4</div> 
</div> 

<div class="element"> 
    <input type="radio" name="group2" class="5 trigger" data-rel="5" /> 
    <input type="radio" name="group2" class="6 trigger" data-rel="6" /> 
    <input type="radio" name="group2" class="7 trigger" data-rel="7" /> 
    <input type="radio" name="group2" class="8 trigger" data-rel="8" /> 
</div> 
    <div id="secondgroup"> 
    <div class="5 content">text 5</div> 
    <div class="6 content">text 6</div> 
    <div class="7 content">text 7</div> 
    <div class="8 content">text 8</div> 
</div>

最後只是風格

<style> 
.none { 
    display:none; 
    } 
</style>

http://jsfiddle.net/94K3P/3/

來源

2014-04-01 user3260707

您有許多語法問題，其中包括濫用觸發方法和多個ID值。你也正在改變普通的div，這是不可編輯的。 – isherwood

所以你想要.change事件顯示每個組中的第一個div？還有什麼？？我認爲你的身份證不應該有空格。（請確認是否可以在IDS中有空格） –

我想顯示每個div組的值，如果您更改第一組中的單選按鈕，則不會影響第二組的值 – user3260707

看看這個：

http://jsfiddle.net/isherwood/94K3P/8

$('.trigger').change(function() { 
    $('.content.' + $(this).data('rel')).show().siblings('.content').not(this).hide(); 
}); 

$('.trigger:first-child').each(function() { 
    $(this).attr('checked', true).trigger('change'); 
});

我仍然不知道我理解你的目標，但也許這是接近。

來源

2014-04-01 13:43:34 isherwood

這就是現在需要做的一切就是在頁面加載 – user3260707

這樣的[link]（http://jsfiddle.net/94K3P/6/）時，默認選擇每個組中的第一個廣播，但想要行$（「.1」）。prop（「checked」，true）.change（）;和$（「。5」）。prop（「checked」，true）.change（）;要動態，所以我不需要爲每個組寫一個 – user3260707

答案更新。它已經非常正確，但是您的原始HTML設置不正確。 – isherwood

jquery顯示/隱藏多個divs組

回答

相關問題