Question

我的dom看起来像这样：

<div class="profile">
       <a href="#"><img src="/img1.gif" /></a> <b>100</b>
       <a href="#"><img src="/img2.gif" /></a>
</div>

好的，所以我的页面上有很多这些元素，所以使用jQuery我绑定所有这些事件：

$(".profile").live('click', myCallback);


var myCallback = function(event) {
         // ??
};

现在，当有人点击第一个超链接时，我想将图像更改为“/img1_on.gif”，然后对网页进行ajax调用，并将之间的值替换为返回值。

单击其他图像时会发生同样的事情，但图像更改为“/img2_on.gif”并进入另一个URL。

如果我将转换为div并添加一些css会更容易吗？

Answer 1

$(".profile a").live("click", function(e) {
  var temp = $("img", this);
  var temp2 = temp.attr("src").split('.');

  temp.attr("src", temp2[0] + "_on" + temp2[1]);

  // Ajax goes here.

  e.preventDefault();
});

你拥有它以便div被点击的那个，而不是div里面的链接。假设您填写了ajax部分，此函数应该适合您。

Answer 2

我不完全确定你在问什么，但是如果你想找到导致click事件的元素，你可以使用e.target，然后使用$（e.target）。像这样的东西。

$(".profile").live('click', function(e){
  if($(e.target).is("a"))
     $(e.target).find("img").attr("src","/new/url.jpg");
});

Answer 3

例如，仅选择子链接（此将是链接）：

$(".profile > a")

对于图像（此将是要操作的图像）：

$(".profile > a > img").live("click", function(event) {
    var src = $(this).attr("src");
    $(this).attr("src", src.replace(".gif", "_on.gif"));
    // ajax call in any way you prefer
    // in callback you can switch button state back
});

Answer 4

你会发现这个post准确地解释了事件顺序是什么，在捕获或冒泡阶段听取事件以及何时取消进一步的事件传播意味着什么。

单击div，但希望子元素对单击做出反应

4 个答案: