泛化這個jQuery代碼

我想概括如下：泛化這個jQuery代碼

<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>

來源

2011-07-29 abcde123483

添加類針對你的目標和你的代碼改成這樣

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

來源

2011-07-29 12:56:56

你可以在同樣的功能結合到所有元素，並解析數出它是這樣的：

$('[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"); 
});

來源

2011-07-29 12:56:04 pimvdb

事情是這樣的：

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>

來源

2011-07-29 12:56:19 Mrchief

像這樣的東西應該工作：

$('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"); 
});

來源

2011-07-29 12:57:34

泛化這個jQuery代碼

回答

相關問題