Question

我正在寻找一些关于如何编写代码以减少冗余代码同时保持清晰度的帮助。

鉴于这个HTML（从真实的东西中大大简化）：

<div>
    <fieldset>
        <legend>Select Day for Code <span class="typeCode">089</span></legend>
        <select name="date1" id="date1" class="dateSelect">
            <option value="Mon">Monday</option>
            <option value="Tue">Tuesday</option>
            <option value="Wed">Wednesday</option>
            <option value="Thu">Thursday</option>
            <option value="Fri">Friday</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>Select Day for Code <span class="typeCode">087</span></legend>
        <select name="date2" id="date2" class="dateSelect">
            <option value="Mon">Monday</option>
            <option value="Tue">Tuesday</option>
            <option value="Wed">Wednesday</option>
            <option value="Thu">Thursday</option>
            <option value="Fri">Friday</option>
        </select>
    </fieldset>
</div>

我想知道哪些天被选中用于特定代码。使用jQuery，我可以使用这样的东西：

$(
    "div fieldset:has(.typeCode):contains(061) .dateSelect option:selected," +
    "div fieldset:has(.typeCode):contains(064) .dateSelect option:selected," +
    "div fieldset:has(.typeCode):contains(065) .dateSelect option:selected", +
    "div fieldset:has(.typeCode):contains(089) .dateSelect option:selected," +
    "div fieldset:has(.typeCode):contains(090) .dateSelect option:selected"
).each(
    function(index) {
        doSomethingHere();
    }
);

然而，似乎应该有一种简化选择器的方法。像这样的东西会很好，但似乎不可能：

$(
    "div fieldset:has(.typeCode):contains([061,064,065,089,090]) .dateSelect option:selected"
).each(
    function(index) {
        doSomethingHere();
    }
);

我能想出的就是这样：

var typeCodes = ["061", "064", "065", "089", "090"];

$("div fieldset:has(.typeCode)").each(
    function(index) {
        var code = $(this).find(".typeCode").text();
        if ($.inArray(code, typeCodes) > -1) {
            var dateSelected = $(this).find(".dateSelect option:selected");
            doSomethingHere();
        }
    }
);

这消除了重复的代码，但代价是降低了清晰度。

有没有更好的方法来做这样的事情？

Answer 1

我会将每个typecode上的fieldset作为自定义data-*属性 - filter抛出您不想要的内容 - 然后检查{{1} }} ..

HTML：

select

和JS：

<fieldset data-typecode="089">
    <legend>Select Day for Code <span class="typeCode">089</span></legend>
    <select name="date1" id="date1" class="dateSelect">
        <option value="Mon">Monday</option>
        <option value="Tue">Tuesday</option>
        <option value="Wed">Wednesday</option>
        <option value="Thu">Thursday</option>
        <option value="Fri">Friday</option>
    </select>
</fieldset>

重构选择元素匹配值列表

1 个答案: