Question

每当从我的下拉选择中选择“音量”时，下面的JQuery会显示一个隐藏的div。问题是，当我克隆包装下拉列表的div时，逻辑仅适用于原始div，隐藏的div显示在原始和克隆的div下面。

当我从克隆元素中选择“volume”时没有任何反应。

$('.hiddenBreak').hide();

$('select.discount').change(function(){
    if ($('.discount').val() == 'volume') {
            $('.hiddenBreak').slideToggle('medium');
        } else {
            $('.hiddenBreak').slideUp('fast');
        };
});

<div>
    <select class="discount">
       <option value="volume">Volume</option>
       <option value="nothing">Nothing</option>
    </select>
</div>

<div class="hiddenBreak">
  Message goes here
</div>

Answer 1

请改为尝试：

if ($('.discount').val() == 'volume') {
        $('.hiddenBreak').slideDown('medium');
    } else {
        $('.hiddenBreak').slideUp('fast');
    }

我觉得那里有.toggleSlide()可能会搞砸你。

此行$('hiddenBreak').hide();可能没有做任何事情，如果你想隐藏该div，你需要用$('.hiddenBreak').hide();替换它

Answer 2

你需要使用live来解决这个问题，我认为你的绑定会在创建克隆元素之前发生。

$('select.discount').live('change', function() {
    if ($('.discount').val() == 'volume') {
            $('.hiddenBreak').slideToggle('medium');
        } else {
            $('.hiddenBreak').slideUp('fast');
        };
});

在克隆元素上选择选项逻辑

2 个答案: