【问题标题】:jQuery Make a variable containing the id of button clickedjQuery 创建一个包含被点击按钮 id 的变量
【发布时间】:2018-10-15 18:49:51
【问题描述】:

选择您自己的冒险类型的游戏需要该代码。 当然会有很多文本和按钮,所以我认为与其为每个按钮编写代码行,不如编写一些使用变量的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

 var n = $('button').find(this.id);

$(document).ready(function(){
    $("#2").click(function(){
        $("#1").hide();
        $("#n").hide();
    });
    $("#2").click(function(){
        $("#3").show();
    });
});

</script>

我尝试了很多不同的解决方案,但由于我不擅长 jQuery,所以我找不到一个可行的解决方案。

如果有人能告诉我什么是正确的,以及它是如何工作的,我将不胜感激。 非常感谢!

如果您需要更多信息,我会在明天继续。

【问题讨论】:

  • 在你的点击函数里面添加:var x = this.id;
  • @dustytrash 我之前看过那个页面,但我找不到答案。有点不确定该怎么做,我需要找到 id,然后在函数中使用变量作为 id。
  • 您对建议的解决方案有什么不了解的地方?另一个建议是为按钮使用类,以便您可以在 1 个命令中显示/隐藏 $('.gameType').is(':not(:checked)').hide();

标签: jquery button


【解决方案1】:

您可以在每个按钮上设置一个data-attribute,然后监听您的整个应用按钮点击。当检测到一个时,您可以获取data-action 的值并使用 switch 语句选择要执行的操作。

<button data-action="start adventure">Start!</button>
<button data-action="pause game">Pause...</button>
<button data-action="quit">Quit.</button>

<script>
    $('body').on('click', 'button', function(e){
      var clicked_button = $(e.target); 
      var button_action = clicked_button.data('action');

      switch(button_action){
          case 'start adventure': {
              // do things
              alert('Lets start an adventure!');
              break; 
          }
          case 'pause game': {
              // do things
              alert('Game is paused.');
              break;
          }
          case 'quit': {
              // do things
              alert('Sorry to see you go!! :( '); 
              break;
          }
          default: {
              console.log('What do we do for this action?', button_action); 
          }
      }
  });
</script>

data-attribute 的“属性”部分可以是任何你想要的词。数据-动作,数据-事物,数据-随便。只需确保在 jQuery 中获得 .data('attribute') 部分以匹配您选择的单词。

JS Fiddle Exmaple

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-29
    • 1970-01-01
    • 2011-06-17
    • 1970-01-01
    • 2014-01-05
    相关资源
    最近更新 更多