javascript - 我该如何优化这段代码？我需要在所有 50 个州都这样做，并且在每个州，文本都会发生变化

Question

我该如何优化这段代码？我需要在所有 50 个状态中执行此操作，并且在每个状态中，文本都会发生变化，所以我想知道除了添加 50 个 ifs 条件之外是否还有其他方法

我想要做的是在每个状态中添加 50 个动态文本，每个状态都有不同的信息，这是在 wordpress 中开发的

如果有其他方法可以使它更优化或更好的实践，也许使用 jqueryde。谢谢

<select onchange="states_info(this.value)" name="country" id="country">
    <option value="Alabama" selected><?php echo "Alabama"?></option>
    <option value="Alaska"><?php echo "Alaska" ?></option>
    <option value="Arizona"><?php echo "Arizona" ?></option>
    <option value="Wisconsin"><?php echo "Wisconsin" ?></option>
</select>
<h2 id="Title" ><?php echo "Alabama Requirements"?></h2>
<p id="credits" ><?php echo "Total Credits: 12 "?></p>
<ul>
    <li id="li_1" ><?php echo "At least 1 in Ethics"?></li>
    <li id="li_2" ><?php echo "At least 6 Live"?></li>
    <li id="li_3" class="hide"></li>
</ul>
<p id ="change_due" class="b" ></p>
<p id="Deadline"><?php echo " Deadline: December 31st"?></p>
<p id="change" class="b"></p>
<p id="reported" ><?php echo "How are credits reported?"?></p>
<button id="webinars"  class="button-custom"></button>
<button id="ethics"    class="button-custom"></button>

<style>
    p.b{
        font-style: italic;
        display:none; 
        color: blue;
    }
    .hide{
        display:none;  
    }
    .thick {
        font-weight: bold;
    }
    .normal {
        font-weight: normal;
    }
    .button-custom{
        background-color: Transparent;
        background-repeat:no-repeat;
        border-color: #5CCAF3;
        color: #5CCAF3;
        border-radius:5px;
        cursor:pointer;
        overflow: hidden;
        text-align: center;
        width: 100%;
        display:none;
        height: 45px;
    }
</style>

<script>
    function states_info(state){
        if(state =="Alabama"){
            document.getElementById("Title").innerHTML = "Alabama  Requirements";
            document.getElementById("credits").innerHTML = "Total Credits: 12 credit hours every year";
            document.getElementById("li_1").style.display = "block";
            var normal = document.getElementById("li_1");
            normal.classList.remove('thick');
            normal.classList.add("normal");
            document.getElementById("li_1").innerHTML = "• At least 1 in Ethics";
            document.getElementById("li_2").style.display = "block";
            var bold = document.getElementById("li_2");
            bold.classList.remove('thick');
            bold.classList.add("normal");
            document.getElementById("li_2").innerHTML = "• At least 6 Live";
            document.getElementById("Deadline").innerHTML = " Deadline: December 31st";
            document.getElementById("change").style.display = "none";
            document.getElementById("reported").innerHTML = "How are credits reported?  Alabama .";
            document.getElementById("webinars").style.display = "none";
            document.getElementById("ethics").style.display = "none";
            document.getElementById("change_due").style.display = "none";
        }
        if(state == "Wisconsin"){ 
            document.getElementById("Title").innerHTML = "Wisconsin Requirements";
            document.getElementById("credits").innerHTML = "Total Credits: 30 credit hours every 2 years.";
            document.getElementById("li_1").style.display = "block";
            document.getElementById("li_1").innerHTML = "• At least 3 in Ethics ";
            document.getElementById("li_2").style.display = "none";
            document.getElementById("change_due").style.display = "block";
            document.getElementById("change_due").innerHTML = "*Change due";
            document.getElementById("Deadline").innerHTML = "Deadline: December 31st";
            document.getElementById("change").style.display = "none";
            document.getElementById("reported").innerHTML = "How are credits reported? Wisconsin ";
            document.getElementById("webinars").style.display = "block";
            document.getElementById("webinars").innerHTML = "Live webinars for Wisconsin";
            document.getElementById("ethics").style.display = "block";
            document.getElementById("ethics").innerHTML = "Live ethics webinars for Wisconsin";
        }
    }
</script>

标签： javascriptphphtml

Answer 1

使用包含每个状态信息的对象：

const state_data = {
    Alabama: {
        credits: "Total Credits: 12 credit hours every year",
        Deadline: "December 31st",
        change_due: null,
        li_1: "• At least 1 in Ethics",
        li_2: "• At least 6 Live",
        reported: "How are credits reported?  Alabama .",
        change: null,
        webinars: null,
        ethics: null
    },
    Wisconsin: {
        credits: "Total Credits: 30 credit hours every 2 years.",
        deadline: "December 31st",
        change_due: "*Change due",
        li_1: "• At least 3 in Ethics",
        li_2: null,
        reported: "How are credits reported?  Wisconsin .",
        change: null,
        webinars: "Live webinars for Wisconsin",
        ethics: "Live ethics webinars for Wisconsin"
    },
    ...
};
    

function states_info(state) {
    document.getElementById("Title").innerHTML = `${state} Requirements`;
    Object.entries(state_data[state]).forEach((id, value) => {
        let el = document.getElementById(id);
        if (value !== null) {
            el.style.display = "block";
            el.innerHTML = value;
        } else {
            el.style.display = "none";
        }
    });
}