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

$（function（）{

    $('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

使用连接和值：

$('select').change(function(){
    $(".main_text").html("<"+this.value+">Change Headings</"+this.value+">")
});

或其他完成方式，请参阅下面的代码：

    $('select').change(function() {
      var obj = $('<' + this.value + '>', {
        text: "Change Headings"
      });
      $(".main_text").html(obj);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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脚本更短更好

1 个答案: