Question

我想在按钮点击事件上切换“是”和“否”消息，但目前无法使用以下代码：

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <button id="myButton">
            Button
        </button>
        <br />
        <span id="mySpan">          
        </span>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

JS custom.js

$(document).ready(function(){
    $('#myButton').on('toggle',function(){
        $('#mySpan').html('Yes');
    },function(){
        $('#mySpan').html('No');
    });
});

Answer 1

没有'toggle'事件 - 您可以使用jquery .toggle()函数或使用.on('click')处理程序然后执行切换。

$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

Answer 2

＆＃13;

var $mySpan = $('#mySpan');
$('#myButton').on('click', function(){
  $mySpan.html( $mySpan.html() === 'Yes' ? 'No' : 'Yes' );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
  Button
</button>
<br />
<span id="mySpan">          
        </span>

＆＃13;

Answer 3

它在第一次单击时没有做任何事情，因为它只在那时附加了事件处理程序。

$(document).ready(function(){
    $('#myButton').click(function(){
      
$("#mySpan").text() =="Yes"?    $('#mySpan').text('No'):$('#mySpan').text('Yes');
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
            Button
        </button>
        <br />
        <span id="mySpan">          
        </span>

Answer 4

您只需使用.click事件代替.on。

这是工作小提琴：

https://jsfiddle.net/mp5w4b8c/

你的jQuery应该是这样的：

$(document).ready(function(){
    $('#myButton').click(function(){
        $('#mySpan').html('Yes');
    },function(){
        $('#mySpan').html('No');
    });
});

更新

我将我的jQuery逻辑更改为：

$(document).ready(function() {
    $('#myButton').click(function() {
        if($('#mySpan').html ===  "" || 'No') {
            $('#mySpan').html('Yes');
        } else if($('#mySpan').html === 'Yes') {
            $('#mySpan').html('No');
        }
    });
});

但它并没有像我预期的那样发挥作用。我的代码中有任何问题吗？

更新的小提琴：https://jsfiddle.net/mp5w4b8c/

Answer 5

这适用于切换最新版本的jQuery。 .toggle()现在只显示或隐藏元素。您可以使用各种选项来控制发生的情况。此示例从存在的所有元素开始，但其中一个元素不通过CSS显示。 jQuery .toggle()将使用mySpan类来切换元素的显示值。

＆＃13;

$('#myButton').click(function(){
  $('.mySpan').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <button id="myButton">
            Button
        </button>
        <br />
        <span class="mySpan">Yes</span>
        <span class="mySpan" style="display: none">No</span>      
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

＆＃13;

Answer 6

var $elem = $('#mySpan'); 
$('#myButton').click(function(){ 
   $elem.html( $elem.text().trim() === 'Yes' ? 'No' : 'Yes' ); 
});

此代码适用于您的案例

切换无法显示备用消息

6 个答案:

更新