Javascript 按数据属性显示和隐藏元素

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

也许有更好的方法可以做到这一点，但我想到的是使用数据属性来获取需要操作的元素

但我不明白为什么我的代码不起作用

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

HTML

CSS

---

谢谢。

我认为您不需要有2个属性，因为您在任何时候都只会显示1个，您可以隐藏所有其他可见的数据元素

$'form_type'。在'change'上，函数{ var self=$this， selectedOption=self.find'option:selected'， showId=selectedOption.datashow， parentForm=self.最近的'form'， $el=parentForm.find'[data visible='+showId+']； parentForm.find'[data visible]'。而不是$el.addClass'hidden'。find'input'。prop'disabled'，true； $el.removeClass“隐藏” .find'input'。prop'disabled'，false； }; .隐藏{ 能见度：无； 显示：无； } 显示0 显示1

---

而@Arun的答案是正确的，可以解决您的问题，并支持两个以上的选项。。你应该使用它——它仍然不能回答你代码中的错误

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

查看HTML，您有两个元素，数据可见，数据隐藏

<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>

让我们看一个具体的例子

假设showId是类型_1，这意味着hided是类型_0

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

如果您希望保持相同的逻辑并简单地修复bug，您可以执行以下操作之一

请参阅showId或hideId，但不能同时参阅两者。 指的是可见数据或隐藏数据，但不能同时指两者。 第一个选项意味着将代码更改为：

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);

这两种方法都可以解决问题

第一个解决方案： 第二种解决方案： 这就解释了为什么您的代码不起作用。

---

对于生产，请使用Arun的解决方案

为什么要使用$'dialog'。查找'form_type'而不是$'form_type'，form_type是一个ID，在dom中应该是唯一的？为了将来的参考，您应该包括您的意思，而不只是为了向其他人澄清。否则，这是一个很好的问题，在我的真实代码中，我必须从存储的变量dialog中获取$'form\u type'。查找'form\u type'。但我明白你的意思。如果我知道出了什么问题，我就不会问了？啊，聪明的使用。不是。Thanks@oBo问题在于showId和hideId选择了相同的元素。。因此，首先您删除了隐藏类，然后将其添加回感谢这澄清了我的错误，我有另一个相同形式的逻辑，需要其他显示/隐藏引用，因此在我的情况下，这会更好地工作。泰！

<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>

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


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

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);