jQuery кнопка нажмите изменить изображение

$("#button").click(function() { 
    //debugger; 
    if ($("img[id=image][src:contains(Grass)]")) 
     $("img").attr({ src: "/Content/images/Spring.jpg", alt: "Spring" }); 
    else 
     $("img").attr({ src: "/Content/images/Grass.jpg", alt: "Grass" }); 
}); 

<a href="/Content/images/Grass.jpg"><img src="/Content/images/Grass.jpg" alt="image" id="image"/></a> 
<input type="button" id="button" name="button"/>

У меня есть простая форма с изображением и кнопкой, я хочу, чтобы каждое нажатие кнопки изменилось. Логика очень проста. По умолчанию image src = /Content/images/Grass.jpg Когда я нажимаю кнопку, первое изображение меняется, но когда я нажимаю второй раз, он не возвращается обратно. Я проверяю отладчик и узнаю, что условие $("img[id=image][src:contains(Grass)]") всегда true. Но после первого нажатия кнопки не должно получиться false?jQuery кнопка нажмите изменить изображение

если я объявляю

var img1 = $("img#image[src:contains(Grass)]"); 
    var img2 = $("img#image[src:contains(Grass2)]"); 
    var img3 = $("img#image[src:contains(blabla)]");

каждый img1.length = 1 img2.length = 1 img3.length = 1 Почему?

но

var img1 = $("img#image[src*='Grass']"); 
var img2 = $("img#image[src*='Grass2']"); 
var img3 = $("img#image[src*='blabla']");

каждый img1.length = 1 img2.length = 0 img3.length = 0 это то, что ожидалось.

Означает ли это, что src:contains(text) и src*=text так отличается?

источник

2011-01-30 Reg

Линия if ($("img[id=image][src:contains(Grass)]")) всегда будет правдой. Функция $() возвращает объект jQuery, и объект всегда оценивает значение true. Вы должны проверить, что длина результата не 0.

if ($("img[id=image][src:contains(Grass)]").length > 0)

источник

2011-01-30 01:44:45

Кстати, этот код не очень хороший способ сделать что-то, и я бы посоветовал не использовать его на производственном сайте. Но если вы просто экспериментируете с тем, как работает jQuery, тогда этот ответ даст вам то, что вам нужно. –

Не работает, я смотрю в debug, в обоих случаях ($ ("img [id = image] [src: contains (Grass)]"). Length и $ ("img [id = image] [src: contains (Spring)] ").) В то же время я получаю длину, равную 1 – Reg

@ Джейсон ЛеБрун Я просто экспериментирую, но каков лучший способ сделать это? – Reg

Попробуйте это:

var img = $("#image"), 
    a = img.parent('a'); 
$("#button").click(function() { 
    var str = (img.attr('src').search('Grass') != -1) ? "Spring" : "Grass", 
     src = "/Content/images/"+str+".jpg"; 
    img.attr({ src: src, alt: str }); 
    a.attr("href", src); 
});

Сначала мы кэшируем #image объект JQuery, не нужно, чтобы выбрать его каждый раз, когда нажата кнопка. Затем мы выполняем обычный поиск по javascript в строке src. Если в нем есть трава, мы меняем ее на весну. Поскольку мы кэшировали объект jQuery #image, нам не нужно его повторно выбирать, чтобы изменить атрибуты src и alt. Также, если вы меняете img src Я предполагаю, что вы, вероятно, захотите обновить ссылку вокруг него.

источник

2011-01-30 01:52:31 PetersenDidIt

Значит ли это, что в этом случае селектор $ ("img [id = image] [src: contains (Grass)]") работает не так, как ожидалось? – Reg

@Reg yes: contains - это специальный селектор, который не работает с атрибутами. http://api.jquery.com/contains-selector/ – PetersenDidIt

$("#button").click(function() { 
    var alt = ($('img#image[alt="Grass"]').length) ? 'Spring' : 'Grass'; 
    $('img#image').attr({ src: "/Content/images/"+alt+".jpg", alt:alt }); 
}); 

<a href="/Content/images/Grass.jpg"> 
    <img src="/Content/images/Grass.jpg" alt="Grass" id="image"/> 
</a> 
<input type="button" id="button" name="button"/>

источник

2011-01-30 01:53:03 sod

Должно быть «img # image», а не изображение # img, почему в этом случае лучше проверить alt? – Reg

да, должно быть – sod

, но если я не настроил бы alt. Если alt постоянна? Мне все равно нужно проверить src. – Reg

Одно простое исправление, чтобы заменить это:

$("img[id=image][src:contains(Grass)]")

... с этим:

$("#image[src*=Grass]").length

Related selectors:

a^=b a starts with b 
a$=b a ends with b 
a!=b a does not equal b 
a*=b a contains b

источник

2011-01-30 02:52:02

. Я уже исправляю это, используя [attribute * = value] вместо из [attribute: contains (value)], но все еще исследуют, почему они возвращают разные результаты. [attribute * = value] vs [attribute: contains (value)] – Reg

  $("#button").click(function() {     
      var value = ($("img#image[src*='Grass']").length) ? 'Spring' : 'Grass'; 

      $("img").attr({ src: "/Content/images/" + value + ".jpg", alt: value }); 
      });

источник

2011-01-30 02:56:43 Reg

jQuery кнопка нажмите изменить изображение

ответ

Смежные вопросы