Question

我的html：

<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick='return(toggle_server_create("start_ld", "stop_ld", false));' />
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld"  style="display:none;" onclick='return(toggle_server_create("start_ld", "stop_ld", true));' />

在我的javascript / jquery中：

  function toggle_server_create (start_id, stop_id, state){
    var query = '#' + start_id +',' + '#' + stop_id;
    var query_stop = '#' + stop_id
    var query_start = '#' + start_id
    // console.log(state);
    // console.log(query_stop);

    $(query).click(function() {
      // console.log(query_start);
      // console.log (this.name);
      if ((this.name === start_id) && $(this).is(":visible") && state==false) {        
         console.log("Show stop")
          $(query_stop).show();             
      } 
      else if ((this.name === stop_id) && $(this).is(":visible") && state == true) {
        console.log("Show start")
          $(query_start).show();
      }

       $(this).hide();        

    });
  }

toggle_server_create应该接受jQuery变量并相应地在start和stop之间切换。但是，它不会以这种方式运行，而是必须单击两次以查看按钮已更改，再次单击时它会消失。我是JavaScript的新手，我不知道如何解决这个问题。

Answer 1

您的问题是仅在用户点击按钮后设置点击处理程序的结果。单击按钮后，将运行toggle_server_create。当它运行时，它会为两个按钮创建一个点击处理程序，当您单击此按钮时，执行此功能中的所有操作。

因此，第一次执行此操作时，只设置查询变量，然后创建一个单击处理程序，只要设置了其中一个按钮，就会执行该处理程序。这就是你第二次点击它的原因。

代码有点混乱，所以我不能100％确定你想要完成什么，但这就是导致它只在第二次点击时运行的原因。

如果您真的想在按钮之间切换，请考虑以下事项：https://jsfiddle.net/bb14xn7z/1/

你的html在哪里：

<input type="button" value="Start L/D" id="start_ld" name="start_ld"/>
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld"  style="display:none;"/>

你的javascript是：

$(function() {
  $("#start_ld").click(function() {
    $(this).hide();
    $("#stop_ld").show();
  });

  $("#stop_ld").click(function() {
    $(this).hide();
    $("#start_ld").show();
  });
});

注意我没有在html中设置onclick，而是在页面加载时在javascript中设置click处理程序。

Answer 2

这里有两个问题，HTML没有使用撇号作为属性值

<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick="return toggle_server_create('start_ld', 'stop_ld', false));" />

并且您不必传递这些ID，因为它们是静态的，您可以将它们存储在JavaScript中的变量中，或者将它们硬编码到函数中以提供更大的灵活性

Answer 3

你可以用jquery简单地做到这一点：）

https://jsfiddle.net/p1tmaoh7/

HTML

<div class="buttons">
   <input type="button" value="Start L/D">
   <input type="button" value="Stop L/D" style="display:none;">
</div>

jquery的

 $(document).ready(function(){
       $('.buttons input').click(function(){
          $('.buttons input').toggle();
       });
    });

通过传递jquery变量来切换按钮

3 个答案: