Question

我试图让它选择变量＆＃34; choice＆＃34;决定在下拉列表中选择哪个元素。问题是当我点击＆＃34;口号＆＃34;然后回到＆＃34;标题＆＃34;它开始写入两个文本字段。

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事件中绑定事件处理程序，每次更改值时都会将 new 事件处理程序附加到input元素，简而言之，多事件处理程序是得到了附加。

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

＆＃13;

$(".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('');
});

＆＃13;

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

＆＃13;

更改选择框的if-else语句

1 个答案: