Question

我的img内置<p>标记，如果我click img或<p>需要toggled， img应changed。

我是通过adding jQuery(this).attr("src", "img/hide.png");完成的，但img没有改变，任何人都可以建议我走正确路径。

这是我的剧本：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
        });
      });
</script>

这是我的CSS：

.layer1 {
margin: -5px;
padding: 0px;
width: 860px;
}

这是我的标记：

<div class="layer1">
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
</div>

Answer 1

jQuery(this).attr("src", "img/hide.png");

在此上下文中，this将引用.heading（p标记）。你需要深入挖掘一下参考图像：

jQuery(this).find('img').attr("src", "img/hide.png");

这是一个显示的jsFiddle：

http://jsfiddle.net/jonathon/yBFWM/

编辑我错过了问题的内容切换位。

我添加了一些内容，以便知道'活动'内容区域是什么。然后，当您单击图像时，它将隐藏活动内容区域并显示当前内容。我还添加了一些内容，因此如果已经选择了内容，则点击处理程序不会切换内容。

jQuery(".heading").click(function() {
    var $this = $(this),
        $contentArea = $this.next('.content');

    if (!$contentArea.hasClass('active')) {
        $(".content.active").slideToggle(500).removeClass('active');
        $contentArea.slideToggle(500).addClass("active");

        $this.find('img').attr("src", "http://www.google.com/images/icons/ui/doodle_plus/doodle_plus_google_logo_on_grey.gif");
    }
});

Answer 2

您是否在jQuery(this).attr("src", "img/show.png")定义的点击处理程序中加入了行jQuery(".heading").click()？在这种情况下，您的代码无法使用，因为this引用了<p class="heading">，而不是图像。

只需将行更改为

即可

jQuery('img',this).attr("src", "img/show.png")

Answer 3

$("p").mousedown(function(){
    $(this).find('img').attr('src','img/img1.png');
})

$("p").mouseup(function(){
    $(this).find('img').attr('src','img/img2.png');
})

$("img").mousedown(function(){
    $(this).attr('src','img/img1.png');
})

$("img").mouseup(function(){
    $(this).attr('src','img/img2.png');
})

Answer 4

<script type="text/javascript">
    jQuery(document).ready(function () {
        var imgShow = 'img/show.png';
        var imgHide = 'img/hide.png';
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
            if (JQuery(this).find("img").attr('src') == imgShow ) {
                JQuery(this).find("img").attr('src', imgHide);
            } else {
                JQuery(this).find("img").attr('src',imgShow);
            }
        });
      });
</script>

使用jquery切换图像

4 个答案: