Функция возвращает ноль, как это можно исправить? - PullRequest
1 голос
/ 08 ноября 2019

Я хочу создать динамический метод 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>

1 Ответ

3 голосов
/ 08 ноября 2019

Проблема в том, что вы не можете передавать аргументы обработчикам событий 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...