Question

我在通过更改选择值隐藏和显示div中的元素时遇到问题。

可能有更好的方法可以做到这一点，但我想到的是使用data-属性来获取我需要操作的元素。

但我不知道为什么我的代码不起作用！

以下是我的问题的简化版本：

HTML

<div id="dialog">
    <form>
    <select id="form_type">
        <option data-show="type_0" data-hide="type_1" selected>Show 0</option>
        <option data-show="type_1" data-hide="type_0">Show 1</option>
    </select>
    <div data-visible="type_0" data-hidden="type_1">
        <input type="text" value="im visibible for type_0" />
    </div>
    <div data-visible="type_1" data-hidden="type_0" class="hidden">
        <input type="text" value="im visibible for type_1" disabled />
    </div>
    </form>
</div>

的jQuery

$('#dialog').find('#form_type').on('change', function(){

    var self = $(this),
        selectedOption = self.find('option:selected'),
        showId = selectedOption.data("show"),
        hideId = selectedOption.data("hide"),
        parentForm = self.parents('form');

    parentForm
        .find('[data-visible="'+showId+'"]').removeClass('hidden')
        .find('input').prop('disabled', false);


    parentForm
        .find('[data-hidden="'+hideId+'"]').addClass('hidden')
        .find('input').prop('disabled', true);

});

CSS

.hidden {
    visibility:none;
    display:none;
}

Fiddle

感谢。

Answer 1

虽然@Arun的答案是正确的并且将解决您的问题，并且将支持2个以上的选项......您应该使用它 - 它仍然没有回答代码中的错误。。

问题是你一直隐藏/显示相同的元素..

查看您的HTML，您有2个元素，其中data-visible和data-hidden已切换。

<div data-visible="type_0" data-hidden="type_1">
    <input type="text" value="im visibible for type_0" />
</div>
<div data-visible="type_1" data-hidden="type_0" class="hidden">
    <input type="text" value="im visibible for type_1" disabled />
</div>

因此，当您运行以下javascript时，两者都引用相同的对象...

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-hidden="'+hideId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

让我们看一个具体的例子。

让我们假设showId是type_1，这意味着hideId是type_0 ..

选择器[data-visible="type_1"]和选择器[data-hidden="type_0"]指向同一元素。

如果您希望保持相同的逻辑并只是修复错误，您可以执行以下操作之一

指的是showId或hideId，但不是两者。
请参阅data-visible或data-hidden，但不能同时参考两者。

第一个选项意味着将代码更改为：

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-hidden="'+showId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

，第二个选项意味着将代码更改为

parentForm
    .find('[data-visible="'+showId+'"]').removeClass('hidden')
    .find('input').prop('disabled', false);


parentForm
    .find('[data-visible="'+hideId+'"]').addClass('hidden')
    .find('input').prop('disabled', true);

其中任何一个都应该解决问题。

提供第一个解决方案：https://jsfiddle.net/jq4d709q/
提供第二个解决方案：https://jsfiddle.net/x0dj1gce/

这解释了为什么您的代码不起作用。如需制作，请使用Arun的解决方案。

Answer 2

我认为您不需要拥有2个属性，因为您随时只能显示1个，您可以隐藏所有其他data-visible元素

＆＃13;

$('#form_type').on('change', function() {

  var self = $(this),
    selectedOption = self.find('option:selected'),
    showId = selectedOption.data("show"),
    parentForm = self.closest('form'),
    $el = parentForm.find('[data-visible="' + showId + '"]');

  parentForm.find('[data-visible]').not($el).addClass('hidden').find('input').prop('disabled', true);


  $el.removeClass('hidden')
    .find('input').prop('disabled', false);

});

＆＃13;

.hidden {
  visibility: none;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dialog">
  <form>
    <select id="form_type">
      <option data-show="type_0" selected>Show 0</option>
      <option data-show="type_1">Show 1</option>
    </select>
    <div data-visible="type_0">
      <input type="text" value="im visibible for show_0" />
    </div>
    <div data-visible="type_1" class="hidden">
      <input type="text" value="im visibible for show_1" disabled />
    </div>
  </form>
</div>

＆＃13;

展示＆amp;按数据属性隐藏元素

2 个答案: