Question

现在花了几天时间，需要一些指导。我在div中有一个图像切换。基本上，当单击div时，其中的图像应该更改为不同的图像。

这是一个指向jsfiddle的链接，因此您可以看到顶部的图像，一旦点击整个切换区域，该图像应该会改变。

此处还有代码

HTML

<div class="toggle-wrap">
  <div class="trigger">
    <div class="one-third"><img src="http://placehold.it/200x200" /></div>
    <div class="two-thirds column-last">This is where the heading goes <br />
      This is where the description goes<br />
      <a href="#">Toggle Open</a></div>
  </div>
  <div class="toggle-container">
    <div class="one-third">First column This is where the heading goes This is where the heading goes</div>
    <div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
    <div class="one-third column-last">Third column This is where the heading goes This is     where the heading goes</div>
  </div>
</div>

CSS

.toggle-wrap {
        float: left;
    width: 100%;
    margin-bottom: 5px;
}

.trigger {}

.trigger a {
    display: block;
    padding: 10px;
    padding-left: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #1D1D1B;
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
    -o-transition-duration: 0s; 
    background: url(tobeadded) no-repeat right 15px #F3F3F3;
 }

.trigger.active a { 
    background: url(tobeadded) no-repeat right -20px #F3F3F3;
}

.toggle-container {
    overflow: hidden;
    float: left;
    padding: 15px 15px 0 15px;
}

.one-third, .two-thirds {
    display: inline;
    float: left;
    margin-right: 4%;
}

.one-third {
    width: 30.66%;  
} 

.two-thirds {
        width: 64%; 
}

JAVASCRIPT

$(".toggle-container").hide(); 
        $(".trigger").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });
    $(".trigger").click(function(){
        $(this).next(".toggle-container").slideToggle();
    });

希望你们能帮助我。

感谢。

Answer 1

$(this).find("img").attr("src", "http://placehold.it/400x400");

会将图像从200x200更改为400x400。您可以为它们添加一个类（即class = small，class = big），jQuery可以使用它来识别当前正在显示哪个类并在它们之间切换。

Answer 2

像我一样

为图像标记指定一个id

<img id="test" src="http://placehold.it/200x200" />

并使用以下代码：

$(".toggle-container").hide(); 
    $(".trigger").toggle(function(){
        $(this).addClass("active");
        $('#test').attr('src','http://placehold.it/200x200');
        }, function () {
        $(this).removeClass("active");
            $('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png');
    });
    $(".trigger").click(function(){
        $(this).next(".toggle-container").slideToggle();
    });

Answer 3

<强> Demo here

试试这个：

$(".toggle-container").hide();
$(".trigger").toggle(function () {
    $(this).addClass("active");
    $(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
    $(this).removeClass("active");
    $(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
    $(this).next(".toggle-container").slideToggle();
});

Answer 4

将 id 属性添加到 img ，然后在每次执行切换处理程序时更改 src 属性。 img 定义应该是这样的：

<img id="myImage" src="http://placehold.it/200x200" />

并且您的切换处理程序应如下所示：

$(".trigger").toggle(function(){
    $(this).addClass("active");
    $("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
    $(this).removeClass("active");
    $("#myImage").attr('src', 'http://placehold.it/200x200');
});

单击时更改div中的图像

4 个答案: