Question

请看一下：

$(function () {

    $("#add").click(function() {

       val = $('#add_lang').val();
       val1 = $('#add_lang_level').val();

       listitem_html = '<li>';
       listitem_html += val + ' <strong>('+ val1 + '/100)</strong>';
       $.ajax({ url: 'addremovelang.php', data: {addname: val,addlevel: val1}, type: 'post', success: function(output) { alert(output); }});
       listitem_html += '<a href="#" class="remove_lang">Remove</a>'
       listitem_html += '</li>';

        $('#langs').append(listitem_html);

    });

    $('.remove_lang').live('click', function(e) {

       e.preventDefault();
       $(this).parent().remove();
       $.ajax({ url: 'addremovelang.php', data: {delname: val}, type: 'post', success: function(output) { alert(output); }});

    });


});

当用户点击id为add的按钮时，这个简单的jquery脚本会将字符串添加到html列表中。此外，它为每一行添加了一个删除链接，因此当用户点击删除时，它会触发函数remove_lang并删除该字符串。

当用户添加字符串时，此文本来自文本字段，并将其存储在变量 val 中（如您在代码的5行中所示）。然后我通过Ajax调用php脚本将此信息添加到我的mysql数据库。

但是，当用户删除字符串时，我不知道如何知道删除了什么字符串，我的意思是，这个名称，我需要发送到我的PHP脚本，以便从数据库中删除它。

在没有ajax调用的情况下查看我的代码版本：http://jsfiddle.net/wnFsE/

感谢您的帮助!!!

Answer 1

点击删除后，您可以执行以下操作：

    val = $(this).parent().find('input').val();

这将从您添加的隐藏输入中获取值：

Demo Here

Answer 2

您需要将字符串视为一组元素：

 var li = $('<li/>');
 var strong = $('<strong/>', { text: '(' + val1 + '/100)' });
 var link = $('<a/>');

 link.click(function()
 {
     // Insert code here for the link click
 });

 li.append(strong).append(link);

 $('#langs').append(li)

还有其他模式也可以，例如：

$(listitem_html').find('a').click(function()
{
     // Insert code here for the link click
});

只需获取对元素的引用，然后附加click事件处理程序。

Answer 3

面向对象的编程方法有助于使操作非常有条理。您基本上将每个给定语言的操作存储在对象中，修改该语言在删除或添加时的操作。

每次添加或删除语言时，

Here's a live example都会将“存储”对象打印到控制台，以便您可以清楚地看到正在发生的事情。

这里只是JS代码（你会发现我几乎没有改变一件事）：

languageActions = {}

$(function () {

    $("#add").click(function() {

       val = $('#add_lang').val();

       listitem_html = '<li>';
       listitem_html += val;
       listitem_html += '<input type="hidden" name="languages[]" value="' + val + '" /> ';
       listitem_html += '<a href="#" class="remove_lang">Remove</a>'
       listitem_html += '</li>';

       $('#langs').append(listitem_html);

       //now add it to our object
       languageActions[val] = 'add';

       console.log(languageActions);

    });

    $('.remove_lang').live('click', function(e) {

       e.preventDefault();
       val = $(this).prev().val();
       $(this).parent().remove();

       //now change it's value in languageActions
       languageActions[val] = 'remove';

       console.log(languageActions);

    });


});

我要指出的唯一另一件事是你不需要那个隐藏的输入元素，因为你是通过AJAX而不是标准的表单提交来完成的。相反，您可以为您的HTML执行<li><span>Spanish</span><a class="remove_lang">Remove</a></li>，然后.remove_lang上的点击事件将$(this).prev().text()而不是$(this).prev().val()。没什么大不了的，但你的HTML会更清洁。

Answer 4

我想这很简单：

$i = 1;

while(xxx){
    //get the list with a different value for each element
    echo '<div id="add_' . $i . '>$whatever</div>';
    $i++;
}

通用jquery结构化问题

4 个答案: