Question

我有2个输入文字和按钮..我想在2个输入之间同时进行交换。这是我的代码。

$("button").on('click', function() {
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        $(".first").val($(".second").val());
        $(".second").val($(".first").val());
    } else {
        $(this).removeClass("clicked");
        $(".first").val($(".second").val());
        $(".second").val($(".first").val());
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>

第一个输入工作正常但第二个输入不起作用..我希望交换同时发生。

Answer 1

在读取其他值之前，您正在覆盖其中一个。所以你最终得到两倍相同的价值。

传统的方法是使用临时变量：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>

$("button").on('click', function() {
    $(this).toggleClass("clicked");
    var temp = $(".first").val();
    $(".first").val($(".second").val());
    $(".second").val(temp);
});

同时请注意如何使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input class="first" type="text" value> <input class="second" type="text" value> <button type="button">Exchange</button> </div>方法缩短代码。

替代

只是为了提供替代方案，可以使用ES6 destructuring assignment在没有显式额外变量的情况下执行此操作。为此，您需要具有toggleClass值的可分配属性。当然，DOM input属性就是：

value

$("button").on('click', function() {
    $(this).toggleClass("clicked");
    [$(".first").get(0).value, $(".second").get(0).value] = 
            [$(".second").val(), $(".first").val()];
});

Answer 2

因为价值已经改变了。尝试在var

上保存旧值

＆＃13;

$("button").on('click', function() {
    var first = $(".first").val(),
        second = $(".second").val(); 
   
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        $(".first").val(second);
        $(".second").val(first);
    } else {
        $(this).removeClass("clicked");
        $(".first").val(second);
        $(".second").val(first);
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="first" type="text" value>
  <input class="second" type="text" value>
  <button type="button">Exchange</button>
</div>

＆＃13;

Answer 3

addMarker(object: any) {
  var myLatlng = new google.maps.LatLng(object.latitude, object.longitude);
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: myLatlng
  });
  this.addInfoWindow(marker, object);
}

addInfoWindow(marker, object){
  google.maps.event.addListener(marker, 'click', () => {
    this.event = {
      title: object.title,
      content: object.description
    }
    $("#over_map").slideToggle("slow");
  });
}

$("button").on('click', function() {
    var firstVal = $(".first").val()
    var secondVal = $(".second").val()
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        $(".first").val(secondVal);
        $(".second").val(firstVal);
    } else {
        $(this).removeClass("clicked");
        $(".first").val(secondVal);
        $(".second").val(firstVal);
    }
})

您需要先存储原始值，当您尝试交换它们而不存储时忘记其中一个值被覆盖。

Answer 4

使用中间临时变量来交换它们。

$("button").on('click', function() {
    if (!($(this).hasClass("clicked"))) {
        $(this).addClass("clicked");
        var temp = $(".first").val();
        $(".first").val($(".second").val());
        $(".second").val(temp);
    } else {
        $(this).removeClass("clicked");
        var temp = $(".first").val();
        $(".first").val($(".second").val());
        $(".second").val(temp);
    }
});

Working DEMO

如何在2个输入之间交换价值

4 个答案:

替代