Question

使用Jquery，我设法通过单击按钮触发下拉登录表单。但是，我也试图通过替换src图像来改变它旁边的箭头的方向，它似乎什么都不做。

$("#login_panel").slideToggle(200).toggle(
    function() { $("#arrow").attr('src', '/src/east.gif';) },
    function() { $("#arrow").attr('src', '/src/south.gif';) }
);

这可以在以下处看到：
http://dev.mcmodcenter.net（“登录”按钮）

$(document).ready(function() {

$("#login_panel").slideToggle(200).toggle(
    function() { $("#arrow").attr('src', '/src/east.gif';) },
    function() { $("#arrow").attr('src', '/src/south.gif';) }
);

    for (var i = 0; i < 2; i++) {
        $(".mod").clone().insertAfter(".mod");
    }

    $(".mod").lazyload({
        effect: "fadeIn"
    });

});

Answer 1

您可以直接访问this.src - 无需为此创建新的jQuery对象：

$('#arrow').toggle(
    function() { this.src = '/src/south.gif'; },
    function() { this.src = '/src/east.gif'; }
);

如果您希望通过.attr()至少使用$(this)（干不 - 请不要重复 - 在这种情况下，请不要更频繁地指定选择器）

Answer 2

    $("#arrow").toggle(
        function(){$("#arrow").attr("src", "/src/south.gif");},
        function(){$("#arrow").attr("src", "/src/east.gif");}
    );

你在处理函数中省略了“＃”。通过引用“箭头”，您告诉jQuery寻找（可能缺席）<arrow>标签。

现在，对于更大的情况，您在设置的内容会在单击图像时使图像发生变化。你对目标的描述让我觉得那不是你想要的，但很难说。如果您想要某些其他元素来控制对图像的更改，那么您可以将处理程序附加到其他位置。

您想要更改登录按钮旁边的小黑箭头的图像吗？如果是这样，那么应该发生的是设置图像的代码应该添加到现有的处理程序中，该处理程序上下滑动登录表单。（顺便说一下，在Chrome中，登录框显示在一个奇怪的位置，远离按钮的左侧。）

Answer 3

$("arrow")将与<arrow>匹配，您丢失了#

~~此外，toggle method不会将两个函数作为其参数，它的工作方式与您尝试使用它的方式完全不同。~~是的，确实如此。是jQuery的两个不同的toggle methods（插入关于糟糕的API设计的咆哮）

现在你已经完全编辑了代码......

您的代码现在立即将字符串分配给this.src（其中this是我认为的document对象），然后将这两个字符串作为参数传递给toggle方法（这是不可接受的论据）

现在你又完全编辑了它......

Answer 4

看起来你忘了在＃（“箭头”）

中将箭头放在箭头前面

应该是这样的

 $("#arrow").toggle(
            function(){$("#arrow").attr("src", "/src/south.gif");},
            function(){$("#arrow").attr("src", "/src/east.gif");}
        );

Answer 5

此代码应该有效：

$('#login_button').click(function() {
    $(this).find('#arrow').attr('src', function(i, v) {
        return v.indexOf('east.gif') < 0 ? '/src/east.gif' : '/src/south.gif';
    });

    $('#login_panel').slideToggle(200);
});

使用Jquery更改图像源

5 个答案: