Question

以下代码对我不起作用，尽管类似的代码有效（http://85.255.14.137）。 CHANGE_ME文本应该替换为输入字段每次更改时的值。我该如何纠正？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<head>

<script>
  $(document).on('change', '.input', (function(){
    var par = $(this);
    var val = $(this).val();

    par.find("span.value").hmtl(val));            
  });

</script>
</head>

<body>
<div class="col-sm-4">
  <div>
    <form id="A" name="do_something" method="POST" action="/do_something">
      <p>
        <input id="A" class="input" type="number" min="5" value="5" step="1" required />
      </p><p>
        <span class="value">CHANGE_ME</span>
      </p>
    </form>
  </div>   
</div>

</body>
</html>

＆＃13;

Answer 1

首先：正如Taplar所述，在您调用)方法后，您提供的代码会额外增加.html()。正如APAD1所述，您也不应该有两个具有相同ID的元素，但这不会导致您的问题。

第二：这个问题是仔细思考DOM结构的好机会。就目前而言，您不能find()来$(this)，因为$(this)是触发change事件的输入元素。输入没有子节点，因此.find()永远不会返回任何内容。因为您的输入位于段落标记内，并且您的目标跨度位于该父级的兄弟段落中，您必须在dom，over和down之间执行一些复杂的遍历，如下所示：

＆＃13;

$(document).on('change', '.input', function() {
  var par = $(this);
  var val = $(this).val();

  par.closest('p').siblings('p').find('span.value').text(val);
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="col-sm-4">
    <div>
      <form id="A" name="do_something" method="POST" action="/do_something">
        <p>
          <input id="B" class="input" type="number" min="5" value="5" step="1" required />
        </p>
        <p>
          <span class="value">CHANGE_ME</span>
        </p>
      </form>
    </div>
  </div>

</body>

</html>

＆＃13;

如果我们更有意义地处理我们的DOM结构，我们可以避免这个问题，并且对于我们如何处理更改事件有点不同。

首先，让我们在表单中使用更多语义标签。 Inputs need labels;另请注意，the output element是显示使用输入内容的更好标记：

<form id="A" name="do_something" method="POST" action="/do_something">
  <label for="B">Pick a number</label>
  <input id="B" class="input" type="number" min="5" value="5" step="1" required />
  <output for="B">CHANGE_ME</output>
</form>

使用这种结构，DOM遍历更加容易！

$(document).on('change', 'form', function(e) {
  // the form whose input fired `change`
  const $self = $(e.currentTarget);
  const $output = $self.find('output');
  const val = $self.find('input').val();

  $output.text(val);

（请注意，我们don't use this引用表单元素。this可能不清楚，我们有更好的方法来引用jQuery正在与之交互的元素，例如event.currentTarget或者event.target。这两个是subtly different！）

这里有这些变化的片段，对于懒惰：:)

＆＃13;

$(document).on('change', 'form', function(e) {
  // the form whose input fired `change`
  const $self = $(e.currentTarget);
  const $output = $self.find('output');
  const val = $self.find('input').val();

  $output.text(val);
});

＆＃13;

* {
  box-sizing: border-box;
}

output {
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="col-sm-4">
    <div>
      <form id="A" name="do_something" method="POST" action="/do_something">
        <label for="B">Pick a number</label>
        <input id="B" class="input" type="number" min="5" value="5" step="1" required />
        <output for="B">CHANGE_ME</output>
      </form>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 2

您的代码存在一些问题。有一件事你拼错了html错误，另一个问题是你正在寻找span value 类input内的$('.input').change(function() { var val = $(this).val(); $("span.value").html(val); });，但是它不在输入内部。你可以这样写它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-4"> <div> <form id="A" name="do_something" method="POST" action="/do_something"> <p> <input id="A" class="input" type="number" min="5" value="5" step="1" required /> </p><p> <span class="value">CHANGE_ME</span> </p> </form> </div> </div>

ID

与此问题无关的另一个问题是，您有A ID的两个元素，这两个元素无效。 import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D def calculation(v,w,x,y,z): return v+w+x+y+z #Part for 3D plotting so far: fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x=np.arange(1, 10, 1) y=np.arange(1, 10, 1) X, Y = np.meshgrid(x, y) zs = np.array([calculation(1, 1, x, y, 1) for x,y in zip(np.ravel(X), np.ravel(Y))]) Z = zs.reshape(X.shape) ax.plot_surface(X, Y, Z) plt.show()必须是唯一的。

Answer 3

除了hmtl错字。您使用span方法在课程value中浏览/搜索.find。不幸的是那里没有。

您可以使用span

直接访问$(".value").html(val);，而不是遍历

jquery .on更改不会触发

3 个答案: