如何使用jquery在单击另一个div时切换div？

Question

我想在单击"prdfinder“div时切换"prdseries”div。

我正在尝试下面的jquery，但它只切换第一个div。如果我点击另一个，它就不工作了。

我的Html将使用foreach：

<div id="prdfinder">Cisco BX SFP Transceiver (bi-directional)</div><br/>
<div id="prdseries">
<span id ="series_list">1000BASE-BX20-D SFP for Cisco (Downstream)</span><br/><br/>
<span id ="series_list">1000BASE-BX40-D SFP for Cisco (Downstream)</span><br/>
<span id ="series_list">1000BASE-BX60-D SFP for Cisco (Downstream)</span><br/>
<span id ="series_list">1000BASE-BX80-D SFP for Cisco (Downstream)</span><br/>
<span id ="series_list">1000BASE-BX20-U SFP for Cisco (Upstream)</span><br/>
<span id ="series_list">1000BASE-BX40-U SFP for Cisco (Upstream)</span><br/>
<span id ="series_list">1000BASE-BX60-U SFP for Cisco (Upstream)</span><br/>
<span id ="series_list">1000BASE-BX80-U SFP for Cisco (Upstream)</span><br/>
</div>
<div id="prdfinder">Cisco BX SFP+ Transceiver (bi-directional)</div><br/>
<div id="prdseries">
<span id ="series_list">10GBASE-BXD SFP+ for Cisco (Downstream)</span><br/>
<span id ="series_list">10GBASE-BXU SFP+ for Cisco (Upstream)</span><br/>
</div>
<div id="prdfinder">Cisco CWDM SFP Transceiver</div><br/>
<div id="prdseries">
<span id ="series_list">CWDM SFP for Cisco</span><br/>
</div>

下面是我的代码：

<?php 
    $k = 0;
    foreach($seriesArray as $finaldata){
        if($finalMake!='' && $finalModel!='' && $finalSeries!=''){?>
            <?php if((!in_array($finalMake, $finalmakearray)) || (!in_array($finalModel, $finalmodelarray))): ?>
                    <?php array_push($finalmakearray ,$finalMake); ?>
                    <?php array_push($finalmodelarray ,$finalModel); ?>
                    <?php $k++; ?>
            <?php echo '</div><div id="prdfinder'.$k.'">'.$finaldata[1]['make'][0].'    '.$finaldata[0]['model'][0].'</div><br/><div id="prdseries">'; ?>
            <?php endif ; 
            echo '<span id="series_list'.$k.'">'.$seriesUrl.'</span><br/><br/>';
        }
    }
?>

<script>
var count=0;
jQuery(document).ready(function(){
    count++;
    jQuery("#prdfinder"+count).click(function(){
        jQuery("#prdseries"+count).toggle();
    });
});
</script>

Answer 1

试试看这个

<?php 
    $k = 0;
    foreach($seriesArray as $finaldata){
        if($finalMake!='' && $finalModel!='' && $finalSeries!=''){
            if((!in_array($finalMake, $finalmakearray)) || (!in_array($finalModel, $finalmodelarray))):
                array_push($finalmakearray ,$finalMake);
                array_push($finalmodelarray ,$finalModel);
                $k++;
                echo '</div><div class="prdfinder" data-id="prdseries'.$k.'">'.$finaldata[1]['make'][0].'    '.$finaldata[0]['model'][0].'</div><br/><div id="prdseries'.$k.'">';
            endif ; 
            echo '<span id="series_list'.$k.'">'.$seriesUrl.'</span><br/><br/>';
        }
    }
?>

<script>
jQuery(document).ready(function(){
    jQuery(".prdfinder").click(function(){
        var divid = jQuery(this).data('id');
        jQuery(divid).toggle();
    });
});
</script>

Answer 2

这应该会像您预期的那样工作。但是，应该将id's切换为classes (就像我在这里所做的那样)，或者分配不同的id's。在这里，这适用于修改为classes的id's

​

jQuery(document).ready(function(){
    jQuery(".prdfinder").click(function(){
    	if(jQuery(this).nextAll('.prdfinder').length){
        	jQuery(this).nextUntil('.prdfinder').toggle();
        } else {
        	jQuery(this).nextAll('.prdseries').toggle();
        }
    });
});

.prdfinder{
    padding:0 5px;
    background:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdfinder">Cisco BX SFP Transceiver (bi-directional)</div><br/>
<div class="prdseries">
<span class ="series_list">1000BASE-BX20-D SFP for Cisco (Downstream)</span><br/><br/>
<span class ="series_list">1000BASE-BX40-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX60-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX80-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX20-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX40-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX60-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX80-U SFP for Cisco (Upstream)</span><br/>
</div>
<div class="prdfinder">Cisco BX SFP+ Transceiver (bi-directional)</div><br/>
<div class="prdseries">
<span class ="series_list">10GBASE-BXD SFP+ for Cisco (Downstream)</span><br/>
<span class ="series_list">10GBASE-BXU SFP+ for Cisco (Upstream)</span><br/>
</div>
<div class="prdfinder">Cisco CWDM SFP Transceiver</div><br/>
<div class="prdseries">
<span class ="series_list">CWDM SFP for Cisco</span><br/>
</div>

​

注意:这种方法完全没有id的.

Answer 3

您需要给它一个class属性，而不是使用id属性。

<div class="prdfinder" data-id=1>Cisco BX SFP Transceiver (bi-directional)</div><br/>
<div class="prdseries" id="prdseries1">
<span class ="series_list">1000BASE-BX20-D SFP for Cisco (Downstream)</span><br/><br/>
<span class ="series_list">1000BASE-BX40-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX60-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX80-D SFP for Cisco (Downstream)</span><br/>
<span class ="series_list">1000BASE-BX20-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX40-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX60-U SFP for Cisco (Upstream)</span><br/>
<span class ="series_list">1000BASE-BX80-U SFP for Cisco (Upstream)</span><br/>
</div>
<div class="prdfinder" data-id=2>Cisco BX SFP+ Transceiver (bi-directional)</div><br/>
<div class="prdseries" id="prdseries2">
<span class ="series_list">10GBASE-BXD SFP+ for Cisco (Downstream)</span><br/>
<span class ="series_list">10GBASE-BXU SFP+ for Cisco (Upstream)</span><br/>
</div>
<div class="prdfinder" data-id=3>Cisco CWDM SFP Transceiver</div><br/>
<div class="prdseries" id="prdseries3">
<span class ="series_list">CWDM SFP for Cisco</span><br/>
</div>

<script>
jQuery(document).ready(function(){
    $(".prdfinder").addEventListener('click', function(){
        var dataId = $(this).data("id");
        $("#prdseries"+dataId).toggle();
    });
});
</script>