Question

我正在尝试在函数内部实现某些功能，以实际访问父选择器。

以下是我的HTML代码的一小部分：

<div class="module-row module-tab pull-right" id="modtab-sql_net">
    <img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>

<div id="tab-module-row-1">
</div>

<div class="module-row module-tab pull-right" id="modtab-sql_dss">
    <img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>

<div id="tab-module-row-2">
</div>

这是我尝试过的jQuery脚本：

$('div[id^="modtab-"]').click(function(){
    $(this).next('div[id^="tab-module-row"]').toggle(function(){
        $(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
    });
});

现在，我想实际将图像图标从“加号”更改为“减号”（文件名保持不变）。

我需要将代码中的$(this).next('.modtab-toggle')更改为可以工作的内容。

请不要建议只使用$('.modtab-toggle')访问该课程，因为我在代码中有多个此类div标记。它不会那么成功。

感谢您的帮助。

Answer 1

试试这个：

$('div[id^="modtab-"]').click(function(){
   $(this).find('.modtab-toggle').attr("src", function(i, attr){
              var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
              return o;
          });
});

See the Demo @ Fiddle

Answer 2

尝试这样的事情

    $('div[id^="modtab-"]').click(function(){
        var $this = $(this);// clicked div
        $this.next('.tab-module-row').toggle(function(){
            $this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
        });
    });

注意：您应该使用class代替id，因为它应该是唯一的

#tab-module-row - ＆gt; .tab-module-row

编辑回答

$('div[id^="modtab-"]').click(function(){
    var $this = $(this);// clicked div
    $this.next('div[id^="tab-module-row"]').toggle(function(){
        var img = $this.find('.modtab-toggle'); // your image object
        // your condition to check which image to display will goes here.
    });
});

Answer 3

将$(this).next('.modtab-toggle')更改为$(this).find('.modtab-toggle')以使其正常工作。

请参阅find() docs here

jQuery选择函数选择器

3 个答案:

See the Demo @ Fiddle