0

我有一组单选按钮，用于在 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);
            }

        });


    } });

虽然我无法让它工作，但我已经尝试了此代码的多种变体，每种变体的结果都略有不同，但它们都没有按预期运行。在此代码的情况下，我的第一个单选按钮根本不起作用，第二个单选按钮只添加它的图像。

此外，任何其他清理它的建议都是受欢迎的（我的无线电检查在那里，因为我在这个函数中处理了其他输入）。

谢谢！

4

1 回答 1

1

也许你让事情复杂化了......如果你将无线电输入包装在标签中，你就不需要 id：

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

然后，您可以使用那些特定收音机的事件，而不是弄清楚它是否是带有live已弃用事件的收音机，而且我认为您也不需要。change如果您有动态无线电输入，那么我建议您on在最近的静态容器上使用，而不是liveon 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

于 2012-11-11T21:51:21.383 回答