使用 jQuery 更改图像答案

【问题标题】：Change image using jQuery使用 jQuery 更改图像
【发布时间】：2013-07-29 21:39:09
【问题描述】：

我有一个使用 jquery-ui 手风琴的 html 页面。现在我必须在此第 2 页图像中添加该图像，该图像应根据活动部分而有所不同。我该怎么做？

HTML：

<div id="acc">
    <h1>Something</h1>
    <div>Text text text</div>
    <h1>Something too</h1>
    <div>Text2 text2 text2</div>
</div>
<div id="pic">
    <img class="change" src="1.png"/>
    <img class="change" src="2.png"/>
</div>

JS：

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            /* I'm think something need here */
        }
    });
});

【问题讨论】：

您是否只想一次显示这 2 张图片中的 1 张？

标签： jquery html jquery-ui

【解决方案1】：

HTML：

<div id="pic">
    <img id="change1" class="change" src="1.png"/>
    <img id="change2" class="change" src="2.png"/>
</div>

JS（我猜你的条件 - 假设你想要每个显示的手风琴不同的图像）

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").attr("src", "new1.png");
                $("#change2").attr("src", "new2.png");
            } else if(ui.newHeader == "Another header") {
                $("#change1").attr("src", "1.png");
                $("#change2").attr("src", "2.png");
            }
        }
    });
});

如果您想在两个图像之间切换：

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").hide();
                $("#change2").show();
            } else if(ui.newHeader == "Another header") {
                $("#change1").show();
                $("#change2").hide();
            }
        }
    });
});

【讨论】：

第二个 - 是我需要的东西。谢谢！

【解决方案2】：

此脚本将显示第一个面板的第一个 img，第二个面板的第二个 img，依此类推

jQuery(function($)
{

   $("#acc").accordion({
       change: function(event, ui) {
          var index = $(ui.newContent).index("#acc>div");

          $("#pic .change")
             // Hide all
             .hide()
             // Find the right image
             .eq(index)
             // Display this image
             .show();
       }
   });

});

【讨论】：

【解决方案3】：

你是对的；你需要把它放在手风琴的 change 事件中。

您可以像这样更改图像：

$('.change').attr('src', someUrl);

【讨论】：

【解决方案4】：

n 我对更改 div 使用的图像的体验：

html:

<div id="pic"><img id="1" src=""></div>

和 jQuery：

var url = "";

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
             var url = "";
            /* set immage url here */

           $('1').attr("src", url);
        }
    });
});

有了这个，你可以在同一个 div 中更改任意数量的图片

PS。

如果你不喜欢你的 img 在加载时是空的，你可以使用

显示：无；

css 属性

然后使用 .show();第一次点击时的功能

【讨论】：