0

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

这是 jsfiddle 的链接，因此您可以在顶部看到图像，一旦单击整个切换区域，该图像就会发生变化。

http://jsfiddle.net/VLe8g/

这里也是代码

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();
    });

希望你们能帮帮我。

谢谢。

4

4 回答 4

0

像我一样为图像标签分配一个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();
    });
于 2013-07-12T10:20:37.370 回答
0 
$(this).find("img").attr("src", "http://placehold.it/400x400");

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

于 2013-07-12T10:18:27.410 回答
0

演示在这里

尝试这个：

$(".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();
});
于 2013-07-12T10:22:08.830 回答
0

将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');
});
于 2013-07-12T10:22:36.257 回答