Question

我有一组单选按钮，我用它来追加和删除div中的图像。我的图像源位于单选按钮内的数据集值中：

<input class="radioGroup" name="radioGroup" type="radio" id="radio1" data-source-image="/image1.jpg" data-source-desc="This is the First Image"> 
<label for="#radio1">Image 1</label><br /> 

<input class="radioGroup" name="radioGroup" type="radio" id="radio2" data-source-image="/image2.jpg" data-source-desc="This is the Second"> 
<label for="#radio2">Image 2</label>

我附加了一个与单选按钮id对应的类，并使用该类删除未检查的图像：

 $('.selections input').live("change", function () {

    // 'Getting' data-attributes using dataset 
    var appendImg = $(this).data('sourceImage'); 
    var itemDesc = $(this).data('sourceDesc'); 
    var item = $(this).attr('id');

    if ($(this).is(':radio')) { 
        var radioGroupName = $(this).attr('name');
        var radioGroup = $('input[name="' + radioGroupName + '"]')

        radioGroup.each( function() {

            if ($(this).attr("checked")) {
                $('.imageContainer').append('<img src="' + appendImg + '" alt="' + itemDesc + '" class="' + item + '" />');
            }

            if ( ! $(this).attr("checked")){
                $('.imageContainer').children('img').remove('.' + item);
            }

        });


    } });

我无法让这个工作，但是我尝试了这些代码的多种变体，每种变体的结果略有不同，但它们都没有按预期运行。对于此代码，我的第一个单选按钮根本不起作用，第二个单选按钮只添加其图像。

此外，任何其他建议清理它都是受欢迎的（我的无线电检查是存在的，因为我正在处理此功能中的其他输入。）

谢谢！

Answer 1

也许你让事情变得复杂......如果你将标签中的无线电输入包裹起来就不需要id：

<label><input type="radio" .../></label>

然后，您可以使用这些特定无线电的live事件，而不是弄清楚它是否是change事件已被弃用并且我认为您不需要的广播。如果您有动态广播输入，那么我建议您在最近的静态容器上使用on，而不是live上的document。

var $container = $('.imageContainer');

$('input[name=radioGroup]').change(function() {

  var $this = $(this), 
      imgSrc = $this.data('source-image'),
      imgDesc = $this.data('source-desc'),
      $img = $('<img/>', { src: imgSrc, alt: imgDesc });

  $('img', $container).remove(); // remove all images
  $container.append( $img ); // add the image linked to the current input

});

由于无线电是独占的，因此只能选择一个，你不需要弄清楚它是否被检查，并找到其他图像，除非你已经在同一个容器内有图像。在这种情况下，我只是为链接到无线电的图像创建一个额外的包装器。

演示： http://jsbin.com/isitos/1/edit

使用单选按钮删除/附加图像

1 个答案: