如何在Jquery中创建动态id选择器 - How to create dynamic id selector in Jquery?

How to create dynamic id selector in Jquery?

本文关键字：动态 id 选择器创建 Jquery | 更新日期: 2023-09-27

我的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>

选择id为'#selectThisID-1'的元素时，<p>将切换。我如何使用#selectThisID-2, #selectThisID-3....#selectThisID-n作为jQuery选择器。如何从php代码到jQuery获得'n'的值?请帮助。

提前感谢。

编辑:

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

与#paraID-1, #paraID-2....#paraID-5全部切换)。然而，我需要在选中div-3时切换para-3，在选中div-4时切换para-4，等等。请帮助。

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

用class代替ID。这个比这里的效率更高。例如:

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

使用class对元素和index()方法进行匹配，不涉及ID:

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

演示:http://jsfiddle.net/UZqD3/

不使用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>