Question

有五个按钮：

<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>

必须做什么：

单击任意两个按钮时，文本应在这些按钮之间切换。

例如：如果我们点击＆＃34;＃btn1＆＃34;然后在＆＃34;＃btn3＆＃34;，＆＃34;＃btn1＆＃34;的文本应成为＆＃34; 3＆＃34;以及＃34;＃btn3＆＃34;应该成为＆＃34; 1＆＃34;。

上述过程应适用于每个按钮，例如点击第一个按钮和第五个按钮等等。

问题：我们如何使用JQuery执行此操作？

Answer 1

将data-flag属性设置为已单击的按钮，并在单击相应的切换button时删除。

$( "button" ).click( function(){
   if ( $("button[data-flag]").length > 0 ) //already clicked a button
   {
      var id = $("button[data-flag]").attr( "data-flag" );
      var text = $(this).text();
      $(this).text( $( "#" + id ).text());
      $( "#" + id ).text( text );
      $("button[data-flag]").removeAttr( "data-flag" ); //remove this line if toggling shouldn't clear
   }
   else
   {
      $(this).attr( "data-flag", this.id );
   }
});

<强>演示

＆＃13;

$( "button" ).click( function(){
   if ( $("button[data-flag]").length > 0 ) //already clicked a button
   {
      var id = $("button[data-flag]").attr( "data-flag" );
      var text = $(this).text();
      $(this).text( $( "#" + id ).text());
      $( "#" + id ).text( text );
      $("button[data-flag]").removeAttr( "data-flag" );
   }
   else
   {
      $(this).attr( "data-flag", this.id );
   }
});

＆＃13;

button[data-flag]
{
   background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>

＆＃13;

Answer 2

您可以使用类来标识应交换的按钮。这样你就可以应用一些css来直观地识别按钮。此外，这使用现有属性，而不是创建新变量。

的CSS：

.swap { color: green; }

javscript：

$('button').on('click', function() {
  if ($('button.swap').length) {
    $(this).val(this.textContent).text($('button.swap').val());
    $('button.swap').text(this.value).removeClass('swap').val('');
  } else {
    $(this).addClass('swap').val(this.textContent);
  }
});

https://jsfiddle.net/Lpy08krd/

Answer 3

选项1 - 如果您要创建一对在每次第二次点击时交换和重置的对。 https://jsfiddle.net/Hastig/4skgd2a6/

＆＃13;

$('button').click(function() {
  if (!($('button').hasClass('first'))) {
    $(this).addClass('first');
  } else {
    let thisText = $(this).text();
    $(this).text($('button.first').text());
    $('button.first').text(thisText).removeClass('first');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

＆＃13;

选项2 - 此选项是您想要在每次点击时交换，不在对之间重置。 https://jsfiddle.net/Hastig/vw304u2x/

＆＃13;

var gLastText = '';
var gLastButton;
$('button').click(function() {
  if (gLastText !== '') {
    var thisText = $(this).text();
    $(this).text(gLastText);
    $('#' + gLastButton).text(thisText);
  }
  gLastText = $(this).text();
  gLastButton = $(this).attr('id');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>

＆＃13;

用JQuery点击任意2个按钮时按钮文本交换

3 个答案: