函数返回零如何解决?

问题描述 投票:0回答:1

我想创建一个动态的appen方法,但是该参数未正确反映在函数中。反射色值为零

$(document).ready(function(colorr) {
  $("button").click(function(colorr) {
    $("body").append(function(colorr) {
      return "<div style='border:1px solid black;border-color: red;  width: 60px;height: 60px;'> " + colorr + " item </div>";
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<body>
  <table border="1">
    <tr>
      <td colspan="2"><button id="button" data-value1="yellow">Append list item</button></td>
      <button onclick="button('yellow')">Try it</button></tr>
  </table>
</body>
jquery function parameters append
1个回答
2
投票

问题是因为您无法以您尝试的方式将参数传递给jQuery事件处理程序。

相反,您需要使用data处理程序中的this引用从元素中读取click属性。然后,您可以构建一个HTML字符串,将该值连接到该字符串,并将其提供给append()方法调用。试试这个:

jQuery(function($) {
  $("button").click(function() {
    var colorr = $(this).data('value1');
    $("body").append('<div>' + colorr + ' item</div>');
  });
});
div {
  border: 1px solid black;
  border-color: red;
  width: 60px;
  height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td colspan="2">
      <button data-value1="yellow">Append list item</button>
      <button data-value1="red">Append list item</button>
      <button data-value1="blue">Append list item</button>
    </td>
  </tr>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.