jquery - 我怎样才能让这个简单的 JQuery 脚本更短更好

Question

我制作了简单的脚本来更改选择选项上的标题。但我认为我的代码对于这个简单的脚本来说太长了。我想让同一个脚本看起来更好更短

HTML:

<div class="main_text">
            <h1>Change Headings</h1>
        </div>


        <select id="selection">
            <option value="h1">H1</option>
            <option value="h2">H2</option>
            <option value="h3">H3</option>
            <option value="h4">H4</option>
            <option value="h5">H5</option>
        </select>

JQuery:

$(函数(){

    $('select').change(function(){
         if ($(this).val() == 'h1') { 
            $(".main_text").html("<h1>Change Headings</h1>")
         } 

         if ($(this).val() == 'h2') { 
            $(".main_text").html("<h2>Change Headings</h2>")
         } 

         if ($(this).val() == 'h3') { 
            $(".main_text").html("<h3>Change Headings</h3>")
         } 

         if ($(this).val() == 'h4') { 
            $(".main_text").html("<h4>Change Headings</h4>")
         } 

         if ($(this).val() == 'h5') { 
            $(".main_text").html("<h5>Change Headings</h5>")
         } 
    });

});

Jsfiddle

Answer 1

你可以这样做:-

$('#selection').change(function () {
    var tag = $(this).val();
    $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
});

FIDDLE DEMO