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。这适用于id's已修改为classes：

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

您需要为其提供一个类属性，而不是使用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>

Answer 4

In the php code add name attribute which hold the number of that predfinder and also add general class predfinder for all ones 

<?php echo '</div><div id=" prdfinder'.$k.'"  name="'.$k.'" class="predfinder">'.$finaldata[1]['make'][0].'    '.$finaldata[0]['model'][0].'</div><br/><div id="prdseries">'; ?>

在jquery代码中获取predfinder div的name属性并将其附加到prdseries名称以便像这样切换

jQuery(document).ready(function()
jQuery(".predfinder").click(function(){
jQuery("#prdseries"+$(this).attr("name")).toggle();
});
});

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

4 个答案: