【问题标题】:jQuery/JavaScript - get clicked button itself in a functionjQuery/JavaScript - 在函数中获得点击按钮本身
【发布时间】:2016-10-23 14:58:24
【问题描述】:

我需要一种方法来在该元素调用的函数中按下该元素,然后禁用它。

我尝试使用 $(this),但不起作用,这是我的代码:

<script>
function x(){
    $(this).prop("disabled",true);
}
<script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

    function x(){
        $(this).prop("disabled",true);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

我想避免添加和调用一个id,有什么办法吗?

谢谢!

-- 编辑--

  • 我无法编辑输入元素,它们在另一个文件中。
  • js代码在html文件之前调用,无法编辑html文件。

【问题讨论】:

标签: javascript jquery function onclick


【解决方案1】:

解决方案 1:

您可以简单地附加一个单击事件处理程序,该处理程序以按钮类型的输入为目标,然后使用this 来定位调用事件的元素。

<script>
$(document).ready(function(){
$("input:button").click(function()
{
  $(this).prop("disabled",true);
});
});
</script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />    

例如:https://jsfiddle.net/DinoMyte/jmLynLsg/1/

解决方案 2:

您可以从您的 javascript 函数中传递 this 关键字,该关键字将充当指向元素的指针。

 <script>
function x(obj){
        $(obj).prop("disabled",true);
    }
</script>
<input type='button' onclick='x(this)' value='Disable me' />
<input type='button' onclick='x(this)' value='Disable me' />

例如:https://jsfiddle.net/DinoMyte/jmLynLsg/2/

【讨论】:

  • 谢谢,它可以工作,但遗憾的是JS代码在html文件之前被调用,我无法编辑它。
  • 您可以将 js 代码包装在 $(document).ready 周围。更新的解决方案。
【解决方案2】:

最好从 html 中删除 onclick 并在 jQuery 中进行绑定,如

$(document).ready(function(){
    $('input[type="button"]').on('click', function(){
         $(this).prop('disabled', true);
  });
});

看看这个工作fiddle

【讨论】:

    【解决方案3】:

    试试这个:

    function x(elem){
        $(elem).prop("disabled",true);
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <input type='button' onclick='x(this)' value='Disable me' />
    <input type='button' onclick='x(this)' value='Disable me' />

    【讨论】:

    • 谢谢,它的工作原理,但遗憾的是,我无法编辑输入元素,它们在另一个文件中。
    【解决方案4】:

    您可以通过几种方式使用 jQuery 获取元素。对于您的输入标签,您可以只说$('input'),但这将获得所有input 元素。如果你给它一个 id,比如&lt;input id="test" ...&gt;,那么$('#test') 就可以了。否则,$('input').prop('disabled',true); 在 Chrome 中为我工作。

    这是我的完整代码:

    <html>
    <head>
    </head>
    <body>
    
        <input id="test" type='button' onclick='disable()' value='Disable me' />
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        function disable() {
            $('#test').prop('disabled',true);
        }
        </script>
    </body>
    </html>
    

    【讨论】:

      【解决方案5】:

      我能想到的一种不需要更改您正在使用的 HTML,但确实涉及更改您收到的 DOM 的方法是:

      function x() {
        $(this).prop('disabled', true);
      }
      
      // selecting, and iterating over, all <input> elements with
      // an in-line 'onclick' event-handler attribute:
      $('input[onclick]').each(function() {
      
        // retrieving the contents of the 'onclick' attribute:
        var onClickFunction = $(this).attr('onclick');
      
        // setting the onClickFunction variable to the
        // substring of the existing value from the first
        // character to the index of the first '('
        // character, so from 'x()' to 'x' or from
        // 'function1();function2()' to 'function1'
        // (this could be worked-around, but this is
        // a simple proof-of-concept):
        onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
      
        // if there is a function, or a variable, held as a
        // property of the window object, then:
        if (window[onClickFunction]) {
          // we remove the 'onclick' attribute, and use the
          // on() method to add the event-handler back:
          $(this).removeAttr('onclick').on('click', window[onClickFunction]);
        }
      });
      

      function x() {
        $(this).prop('disabled', true);
      }
      
      $('input[onclick]').each(function() {
        var onClickFunction = $(this).attr('onclick');
        onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
        if (window[onClickFunction]) {
          $(this).removeAttr('onclick').on('click', window[onClickFunction]);
        }
      });
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <input type='button' onclick='x()' value='Disable me' />
      <input type='button' onclick='x()' value='Disable me' />

      值得注意的是,虽然上述情况在 jQuery 中是完全可能的,但在纯 JavaScript 中同样可能:

      function x() {
        this.disabled = true;
      }
      
      // excuse the absurdly-long variable-names; they were meant to be
      // descriptive.
      // here we retrieve all <input> elements with an onclick attribute:    
      var inputsWithOnClick = document.querySelectorAll('input[onclick]'),
      
        // here we use Array.from() to turn that collection into an Array:
        arrayOfOnClickInputs = Array.from(inputsWithOnClick);
      
      // iterating over the Array, 'input' (the first argument)
      // refers to the current element of the array over which
      // we're iterating:
      arrayOfOnClickInputs.forEach(function(input) {
      
        // retrieving the contents of the 'onclick' attribute:
        var onClickFunction = input.getAttribute('onclick');
      
        // updating that variable to contain the substring of
        // of the attribute-value, from the first character to
        // the first occurrence of of the '(' character:
        onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
      
        // as above:
        if (window[onClickFunction]) {
      
          // removing the 'onclick' attribute:
          input.removeAttribute('onclick');
      
          // using EventTarget.addEventListener to bind the
          // function to the click-event on the <input> element:
          input.addEventListener('click', window[onClickFunction]);
        }
      });
      

      function x() {
        this.disabled = true;
      }
      
      var inputsWithOnClick = document.querySelectorAll('input[onclick]'),
        arrayOfOnClickInputs = Array.from(inputsWithOnClick);
      
      arrayOfOnClickInputs.forEach(function(input) {
        var onClickFunction = input.getAttribute('onclick');
        onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));
      
        if (window[onClickFunction]) {
          input.removeAttribute('onclick');
          input.addEventListener('click', window[onClickFunction]);
        }
      });
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <input type='button' onclick='x()' value='Disable me' />
      <input type='button' onclick='x()' value='Disable me' />

      这些方法的原因很简单,在这种情况下,属性是已知的 (onclick),并且您想在 jQuery 为您管理的函数中使用 this,而 addEventListener() 也自动执行。

      老实说,我想不出另一种方法来将this 提供到您需要的位置。

      参考资料:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2020-06-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-11-24
        • 2016-09-13
        相关资源
        最近更新 更多