Question

在目标div上切换类时遇到问题。我有一组显示的盒子，每个盒子里面都有一个按钮。单击此按钮可以显示该框中的第二个框。但是，每个框都有一个唯一的ID，我只需要显示目标ID。

问题是日志正确显示了目标ID，但是没有切换类。在检查chrome时我可以手动添加.show类，它工作正常，所以我知道它不是CSS。

当我测试.style.display = "inline-block";代替.toggleClass("show");时，控制台现在说目标未定义。

我在页面的许多其他部分使用.toggleClass("show");而没有问题。

我的jQuery有什么问题，它不会将课程.show应用到目标ID？

另外：我知道这只能通过CSS实现，但是我需要比未来更多的灵活性。

PHP，HTML和CSS

<?php
    i=0;
    while(i<20){
    i+1;
?>

<div class="box">
  <a class="openButton" data-target="i">open hidden box</a>
  <div class="hiddenBottom" id="i">stuff</div>
</div>

<?php ;} ?>

<style>
    .box {
     display: inline-block;
    }

   .hiddenBottom {
     display: none;
   }

   .show {
    display: inline-block;
   }

</style>

Jquery的

$(".openButton").on("click mouseover", function(){
    $($(this).data("target")).toggleClass("show");
    console.log($(this).data("target"));
});

Answer 1

要在jQuery中定位ID，语法为：

$("#MyID")

在您的示例中，data-target是一个没有前面的#的数字，因此，如果i为19，则您的选择器为：

//i = 19
//$(this).data("target") = "19"

$($(this).data("target")) // $("19")

以上示例$("19")不会选择任何内容，因为它没有#。

如果您尝试按ID选择，则需要预先添加#并进行连接，如下所示：

$("#" + $(this).data("target")) // $("#19")

.toggleClass的目标ID

1 个答案: