Изменить изображение с помощью jQuery

Question

Изменить изображение с помощью jQuery

4

У меня есть html-страница, где используется jQuery-ui accordion. Теперь я должен добавить на эту страницу 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 */
        }
    });
});

vlad 29 апр. 2010, в 16:23

Источник

0

Вы хотите показать только одно из этих двух изображений одновременно?
jaltiere 29 апр. 2010, в 13:40

Теги:

jquery

html

jquery-ui

4 ответа

5

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

justkt 29 апр. 2010, в 14:39

0

Второе - это то, что мне нужно. Спасибо!
vlad 29 апр. 2010, в 13:52

0

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

и с этим u может иметь как можно больше изображений, таких как u, как изменение в том же div

PS.

Если вам не нравится ваш img beeing empty при загрузке, вы можете использовать

дисплей: нет;

атрибут css

а затем используйте .show(); функция при первом щелчке

Ivan Pavić 29 июль 2013, в 15:25

0

Вы правы; вам нужно поместить его в событие изменения аккордеона.

Вы можете изменить изображение следующим образом:

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

SLaks 29 апр. 2010, в 14:47

Ещё вопросы

Вы хотите показать только одно из этих двух изображений одновременно?
Второе - это то, что мне нужно. Спасибо!

jantimon · Accepted Answer · 2010-04-29T15-09-00.000Z

Этот script покажет первый 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();
       }
   });

});