Question

我有一个可变数量为<div>的页面，人们可以点击+ {符号<img>，然后显示链接到img标记的div。< / p>

我目前有：

PHP / HTML

$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';

$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $( ".clickme" ).click(function() {
        $( ".diary" ).slideToggle( "slow", function() { 
        });
    });
});
</script>

这显然打开了所有div，而不仅仅是点击的那个。我在这里查看了其他类似的问题，并尝试了许多变体，例如：

$(document).ready(function(){
    $(".clickme").click(function(){
         $(this).next(".diary").toggle();   
        });
});

然而，当我尝试这些时，它只是完全停止工作。即没有一个div向上或向下滑动。我看到这些例子适用于JS Fiddle，但只要我将它应用到我的页面，我就什么也得不到。我可能正在做一些非常愚蠢的事情，因为它不能工作，但看不到什么。谢谢你的帮助。

HTML输出应该看起来像

<div>
    <div>
        <table>
            <img class="clickme">
        </table>
    </div>
    <div class="diary">
        <table> content </table>
    </div>
<div>

Answer 1

（基于提供的HTML）最好的方法是向两个元素添加具有匹配索引的属性

  <div>test toggle
    <div class="clickme" data-index="1">click me</div>
    <div class="toggle" id="obj_1">toggled field</div>
</div>

然后在JQuery中：

       $(function () {
            $(".clickme").click(function () {
                //get number from clicked element's attribute
                var index  =$(this).attr('data-index');
                //select element with id that matches index and toggle
                $('#obj_'+index).toggle();
            });
        })

Answer 2

在查看你的代码后，我可以看到slideToggle调用是在.diary类上进行的，这可能适用于你的每个元素。

我建议你把你的日记div放在$ plus div中然后使用jquery孩子或者只是给你的.diary div一个唯一的id并使用你的id属性切换。

修改：

这是一个简单的html输出：

<div class="clickme"> <div class="diary">CONTENT HERE</div> </div>

在CSS中添加：

.clickme { background: url('images/plus.png') no-repeat top left; min-width: 20px; min-height: 20px; cursor: pointer; }

脚本标记：

<script> $(function() { $(".clickme").click(function() { $(this).children().slideToggle("slow"); }); }); </script>

请注意，我会将日记课程用于您的使用和造型目的，但不会在任何地方使用。

jquery slideToggle打开所有div，而不仅仅是所需的div

2 个答案: