Question

我的PHP代码就像这样 -

for($i=1;$i<=$n;$i++)
{
$id='selectThisID-' . $i;
?>
<div id="<?php echo $id;?>">On Select this Div(say #selectThisID-3)<?php echo $field-n; ?></div>

<?php $id= 'paraID-' . $i;
<p id="<?php echo $id; ?>" style="display:none">Toggle this para(say #paraID-3) for selected ID only</p>
}

现在我如何在jQuery中处理这个可变数量的id。正如我所知，对于单个div语句，它可能是：

    <script>
        $(document).ready(function(){
            $("[id^=selectThisID-]").click(function(){
                $("[id^=paraID-]").toggle();
            });
        });
</script>

因此，在选择标识为'#selectThisID-1'的元素时，<p>将切换。如何使用#selectThisID-2, #selectThisID-3....#selectThisID-n作为jQuery选择器。如何从php代码获取'n'的值到jQuery？请帮忙。

提前致谢。

编辑：

假设$n=5，因此总共有5个div元素。现在的问题是，当我选择div中的任何一个（比如#selectThisID-3）时，所有<p>元素都会被切换（即

#paraID-1, #paraID-2....#paraID-5全部切换）。但是，当选择div-3时，我需要切换para-3，当选择div-4时切换para-4，依此类推。请帮忙。

Answer 1

$("[id^=selectThisID-]").click(function(){
    $("#paraID-"+this.id.split('-')[1]).toggle();
});

Answer 2

而不是ID使用类。这比你在那里更有效率。例如：

$(".your-class").each(function(index, domEl){
              $(this).val();
              $(this).toggle();
        });

Answer 3

在元素和index()方法上使用class来匹配它们，而不涉及ID：

var $divGroup=$('.divClass').click(function(){
    var index=$divGroup.index(this);
    $('.paragraphClass').hide().eq( index).show();
})

DEMO：http://jsfiddle.net/UZqD3/

Answer 4

不使用ID，而是使用类并将相应的p id放入自定义属性中：

$(".selectThisID").click(function(){
    $("paraID-" + this.getAttribute("data-target")).toggle();
});

HTML：

<div class="selectThisID" data-target="5">foo</div>
<p id="paraID-5">bar</p>

如何在Jquery中创建动态id选择器？

4 个答案: