선택 상자 변경시 if-else 문

Question

드롭 다운에서 선택한 요소를 결정하기 위해 "choice"변수를 선택하려고합니다. 문제는 "슬로건"을 클릭 한 다음 "헤더"로 돌아가서 두 텍스트 필드에 모두 쓰기 시작할 때입니다. 당신이 새로운 이벤트 핸들러 input 요소에 부착 된 change 이벤트마다 이벤트 처리기를 바인딩되어 있기 때문에

HTML

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

자바 스크립트

$(".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

이 변경 값, 짧게 여러 이벤트 핸들러가 연결됩니다.

keyup 이벤트의 값을 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>