Как мне переключить два изображения с помощью кнопок jQuery и радио? - PullRequest
Новая
       1

Как мне переключить два изображения с помощью кнопок jQuery и радио?

0 голосов
/ 08 июня 2010

Это не красиво, но я думаю, вы получите то, что я пытаюсь сделать. 

<label><input name="jpgSel" type="radio" value="0">jpg 1</label><br />
<label><input name="jpgSel" type="radio" value="1">jpg 2</label><br />
<div id="showjpg"></div>

и 

$(document).ready(function() {
    $("select").change(function () {
           if ($("jpgSel:checked").val() == 1) {
            $('#showjpg').attr({
                src: 'one.jpg',
                 alt: 'one dot jpg'
        });
    }
    else {
            $('#showjpg').attr({
                 src: 'two.jpg',
                 alt: 'two dot jpg'
        });
    }
});

Ответы [ 3 ]

1 голос
/ 08 июня 2010 
if ($("jpgSel:checked").val() == 1) {

следует читать 

if ($("#jpgSel:checked").val() == 1) {

или это была опечатка?

Также вы можете использовать $('#jpgSel:checked') самостоятельно без == 1

1012 * редактировать *

о, и $("input[@name='jpgSel']").click(function(){ может быть лучше.

0 голосов
/ 08 июня 2010

jpgSel - это имя, которое должно быть выбрано следующим образом: 

$("[name='jpgSel']:checked")

, хотя я думаю, что было бы проще отказаться от него и использовать функцию .click () следующим образом: 

$("[name='jpgSel'][value='0']").click(function{/*do something*/});
$("[name='jpgSel'][value='1']").click(function{/*do something else*/});
0 голосов
/ 08 июня 2010

У вас есть несколько проблем:

  • Элемент #showjpg является div, у вас должен быть элемент img.
  • Селектор, который вы используете для привязки события change, неверен ($("select")), он должен выглядеть примерно так: $("input[name=jpgSel]")
  • Если вы связываете событие изменения с обоими переключателями, вы можете получить значение выбранного элемента просто с помощью this.value.

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

$(document).ready(function() {
  $("input[name=jpgSel]").change(function () {
    if (this.value == "0") {
      $('#showjpg').attr({
        src: 'one.jpg',
        alt: 'one dot jpg'
      });
    } else {
      $('#showjpg').attr({
        src: 'two.jpg',
        alt: 'two dot jpg'
      });
    }
  });
});

Проверьте пример здесь .

...