Question

我希望无线电选择能够在克隆的div中工作。 div将无限期克隆，每个克隆都需要一个新的选择。

如何让每个div中的无线电选择按钮指向其div中的项目？

现在看来，选择克隆但是当选择不同的项目时没有任何事情发生。

如果需要更多信息，请与我们联系。

HTML：

<form>
<div id="clonedForm_1" class="clonedForm">
    <div class="addSomeJazz">
    <label name="btn1">Selection 1
        <input type="radio" name="select" class="btn1" value="Selection 1" />
    </label>
    <label name="btn2">Selection 2
        <input type="radio" name="select" class="btn2" value="Selection 2" />
    </label>
    <label name="btn3">Selection 3
        <input type="radio" name="select" class="btn3" value="Selection 3" />
    </label>
    </div>
    <br />
    <div class="selection1 hidden" id="selection1_1">
        <label name="text1" class="hideMe">Something thoughtful:
            <input type="text" name="text1" class="hideMe" />
        </label>
    </div>
    <div class="selection2 hidden" id="selection2_1">
        <label name="select1" class="hideMe">Select one of these:
            <select class="hideMe">
                <option>Select this</option>
                <option>Or this</option>
                <option>Or maybe this</option>
                <option>DO NOT select this</option>
            </select>
        </label>
    </div>
    <div class="selection2 hidden" id="selection3_1">
        <label name="checkyboxy" class="hideMe">What applies:
            <input type="checkbox" name="thechecks" value="cool" class="hideMe" />I am cool
            <input type="checkbox" name="thechecks" value="interesting" class="hideMe" />I am interesting
            <input type="checkbox" name="thechecks" value="funny" class="hideMe" />I am funny</label>
    </div>
</div>
<input type="button" id="cloneMe" value="Add Another Entry" />
<input type="button" id="deleteMe" value="Get rid of that last one" />

JQuery的：

$(document).ready(function () {
$(function () {
    $('#cloneMe').click(function () {
        var num = $('.clonedForm').length,
            newNum = new Number(num + 1),
            newElem = $('#clonedForm_' + num).clone().attr('id', 'clonedForm_' +         newNum).fadeIn('slow');
        newElem.find('.selection1').attr('id', 'selection1_' + newNum);
        newElem.find('.selection2').attr('id', 'selection2_' + newNum);
        newElem.find('.selection3').attr('id', 'selection3_' + newNum);
        newElem.find(":input[type='radio']").attr('name', 'select' + newNum);
        newElem.find(".hideMe").addClass('hidden');

        $('#clonedForm_' + num).after(newElem);
        $('#deleteMe').attr('disabled', false);
    });
    $('#deleteMe').click(function () {
        var num = $('.clonedForm').length;
        $('#clonedForm_' + num).slideUp('slow', function () {
            $(this).remove();
            if (num - 1 === 1) $('#deleteMe').attr('disabled', true);
        });
    });

    $('#deleteMe').attr('disabled', true);
});

$('.btn1').click(function () {
    var num = $('.clonedForm').length;

    $('#selection1_' + num).show();
    $('#selection2_' + num).hide();
    $('#selection3_' + num).hide();
});
$('.btn2').click(function () {
    var num = $('.clonedForm').length;
    $('#selection1_' + num).hide();
    $('#selection2_' + num).show();
    $('#selection3_' + num).hide();
});
$('.btn3').click(function () {
    var num = $('.clonedForm').length;
    $('#selection1_' + num).hide();
    $('#selection2_' + num).hide();
    $('#selection3_' + num).show();
});
});

以下是我在小提琴上设置的示例的链接：http://jsfiddle.net/KatieKatie/pqD8s/

谢谢！

Answer 1

主要问题是您的事件处理程序。我将其更改为使用事件委托和遍历函数来查找要隐藏和显示的元素。还有一些其他的小改动，还有其他优化可以完成（例如，我不认为处理id s会让你获得任何东西）。

http://jsfiddle.net/p9YKt/

这是重要的部分：

$(document).on('click', '.btn1', function () {
    var $container = $(this).closest('.clonedForm');

    $container.find('.selection1').show();
    $container.find('.selection2').hide();
    $container.find('.selection3').hide();
});
$(document).on('click', '.btn2', function () {
    var $container = $(this).closest('.clonedForm');

    $container.find('.selection1').hide();
    $container.find('.selection2').show();
    $container.find('.selection3').hide();
});
$(document).on('click', '.btn3', function () {
    var $container = $(this).closest('.clonedForm');

    $container.find('.selection1').hide();
    $container.find('.selection2').hide();
    $container.find('.selection3').show();
});

Answer 2

@Jason P有票 - 事件冒泡。

我做了一点烘干机。这是一个小提琴：http://jsfiddle.net/UB5EL/1/

1）稍微更新您的HTML以提供与切换的表单元素相关的单选按钮值。

<label name="btn1">Selection 1
    <input type="radio" name="select" class="btn1" value="selection1" />
</label>
<label name="btn2">Selection 2
    <input type="radio" name="select" class="btn2" value="selection2" />
</label>
<label name="btn3">Selection 3
    <input type="radio" name="select" class="btn3" value="selection3" />
</label>

2）将所有切换的表单元素包装在容器中，以便更容易将它们全部隐藏起来。我把它们放在示例中的<div class="selections">中。

3）然后更改JS的结尾，这样您只使用一个change处理程序而不是三个单击处理程序。根据已更改的单选按钮的值，找出如何处理change事件。

$(document).on('change', 'input', function () {

    var $container = $(this).closest('.clonedForm'),
        target = $(this).val();

    $container.find('.selections').find('div').hide();
    // or skip adding the div.selections and use:
    // $container.find('.selection1, .selection2, .selection3 ').hide();

    $container.find('.'+target).show();

});

如何制作显示和隐藏输入的单选按钮在jquery克隆div中工作？

2 个答案: