Question

我想概括一下：

<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $('#target1').click(function() {
    $.post("process_form.php", $("#JqPostForm1").serialize(),
      function(data){
          $("#message_post1").html(data.reddit + " promoted!");
    }, "json");
  });
  $('#target2').click(function() {
    $.post("process_form.php", $("#JqPostForm2").serialize(),
      function(data){
          $("#message_post2").html(data.reddit + " promoted!</div>");
    }, "json");
  });
});
</script>
<body>
<div id="message_post1">
  <form id="JqPostForm1">
    <input type="hidden" name="reddit" value="pics" />
    <div id="target1">+</div>
  </form>
</div>
<div id="message_post2">
  <form id="JqPostForm2">
    <input type="hidden" name="reddit" value="documentaries" />
    <div id="target2">+</div>
  </form>
</div>
</body>
</html>

message_post [1..1000] ， JqPostForm [1..1000] ，目标[1..1000] 但有必须是比拥有1000个jquery函数更好的方法，也许比拥有1000个表单更好。

（ process_form.php 只回显表单的值）

我意识到这可能是一个过于具体的问题，因为你有道歉。

已解决你们这些人！完整的解决方案：

<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $('.target').click(function() {
    var target = $(this);
    $.post("process_form.php", target.parent().serialize(),
      function(data){
        target.parent().html(data.reddit + " promoted!");
    }, "json");
  });
});
</script>
<body>
  <form>
    <input type="hidden" name="reddit" value="pics" />
    <div class=target>+</div>
  </form>
  <form>
    <input type="hidden" name="reddit" value="documentaries" />
    <div class=target>+</div>
  </form>
</body>
</html>

Answer 1

为您的目标添加一个类目标，并将您的代码更改为此

$('.target').click(function() {
  var target = $(this);
  $.post("process_form.php", target.parent().serialize(),
    function(data){
      target.parent().parent().html(data.reddit + " promoted!</div>");
  }, "json");
});

Answer 2

这样的事情：

function processForm($form, $msg) {
    $.post("process_form.php", $form.serialize(),
      function(data){
          $msg.html(data.reddit + " promoted!</div>");
    }, "json");
  }

$('.target').click(
    processForm($(this).closest('form'), $(this).closest('.messagePost'));
)


<div id="message_post1" class="messagePost">
  <form id="JqPostForm1">
    <input type="hidden" name="reddit" value="pics" />
    <div id="target1" class="target">+</div>
  </form>
</div>
<div id="message_post2" class="messagePost">
  <form id="JqPostForm2">
    <input type="hidden" name="reddit" value="documentaries" />
    <div id="target2" class="target">+</div>
  </form>
</div>

Answer 3

您可以将相同的函数绑定到所有元素，并将其解析出来，如下所示：

$('[id^=target]').click(function() {
  var number = $(this).attr('id').substring(6);
  $.post("process_form.php", $("#JqPostForm" + number).serialize(),
    function(data){
      $("#message_post" + number).html(data.reddit + " promoted!</div>");
    }, "json");
});

Answer 4

这样的事情应该有效：

$('div[id^=target]').click(function() {
    var current = this;
    $.post("process_form.php", $(this).parent().serialize(),
        function(data) {
            $(current).parent().parent().html(data.reddit + " promoted!</div>");
    }, "json");
});

推广这个jquery代码

4 个答案: