Обобщая этот код JQuery - PullRequest
Новая
       1

Обобщая этот код JQuery

2 голосов
/ 29 июля 2011

Я хочу обобщить это: 

<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] , target [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>

Ответы [ 4 ]

3 голосов
/ 29 июля 2011

добавьте цель класса к вашим целям и измените свой код на 

$('.target').click(function() {
  var target = $(this);
  $.post("process_form.php", target.parent().serialize(),
    function(data){
      target.parent().parent().html(data.reddit + " promoted!</div>");
  }, "json");
});
2 голосов
/ 29 июля 2011

Примерно так: 

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>
1 голос
/ 29 июля 2011

Примерно так должно работать: 

$('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");
});
1 голос
/ 29 июля 2011

Вы можете привязать одну и ту же функцию ко всем элементам и разобрать число из нее следующим образом: 

$('[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");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...