Question

由于各种原因，我想更改下面的代码以查找数据属性，而不是名为“mygroup”的类。

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="test@test.com" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example.com" data-id="application"/>
<textarea class="input" rows="4" cols="50" placeholder="text*" data-id="applicationdetails"></textarea>

JS

// Apply Fields
function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $(".mygroup").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

FIDDLE

如何更改上面的代码应用于“application”的data-id而不是使用“mygroup”类。对于奖励积分，任何人都可以告诉我如何清除隐藏的字段的内容并禁用它吗？

Answer 1

您只需将其称为$('[data-id="application"]')。

关于清算和停用，请使用.prop()和.val('')：

$('[data-id="application"]').addClass('hidden').prop('disabled', true).val('');
elem.removeClass('hidden').prop('disabled', false);

<强> DEMO

Answer 2

尝试使用属性选择器，即所有具有属性data-id的元素，而不是使用类myClass

function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input[data-id]").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

jQuery(function($){
    applyField();
});

演示：Fiddle

Jquery使用data-id并禁用和清除输入字段

2 个答案: