if-else語句改變選擇框

Question

我想讓它選擇變量「choice」來決定在下拉列表中選擇哪個元素。問題是當我點擊「標語」然後回到「標題」時，它開始寫入兩個文本字段。

HTML

<select class="choice"> 
    <option value="h">Header</option> 
    <option value="s">Slogan</option> 
</select> 
<input class="selecttext" type="text" placeholder="Main Text"></input> 

的JavaScript

$(".fontsdiv .choice").on("change", function() { 
    var choice = $(".choice").val(); 
    if (choice === "h") { 
     $(".selecttext").keyup(function(event) { 
      var titlechange = $(".selecttext").val(); 
      $(".maintitle").html("<h1 class='maintitle'>" + titlechange + "</h1>"); 
      $(".maintitle").draggable(); 

     }); 
    } else if (choice === "s") { 
     $(".selecttext").keyup(function(event) { 
      var titlechanges = $(".selecttext").val(); 
      $(".secondtitle").html("<h1 class='secondtitle'>" + titlechanges + "</h1>"); 
      $(".secondtitle").draggable(); 

     }); 
    } 
}); 

Answer 1

既然你每次結合事件處理程序在change事件新事件處理程序連接到input元素更改值，總之多個事件處理程序正在被附加。

您需要檢查事件input元素中的值。

$(".selecttext").keyup(function(event) { 
 
    var choice = $(".choice").val(); 
 
    var titlechange = $(".selecttext").val(); 
 

 
    if (choice === "h") { 
 
    $(".maintitle").html("<h1 class='maintitle'>" + titlechange + "</h1>"); 
 
    //$(".maintitle").draggable(); 
 
    } else if (choice === "s") { 
 
    $(".secondtitle").html("<h1 class='secondtitle'>" + titlechanges + "</h1>"); 
 
    //$(".secondtitle").draggable(); 
 
    } 
 

 
}); 
 
$(".choice").on("change", function() { 
 
    //Clear value 
 
    $(".selecttext").val(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="choice"> 
 
    <option value="h">Header</option> 
 
    <option value="s">Slogan</option> 
 
</select> 
 
<input class="selecttext" type="text" placeholder="Main Text" /> 
 
<br/> 
 
<div class='maintitle'></div> 
 
<div class='secondtitle'></div>