0

私は以下のようなHTMLを持っています、

<ul class="holder" style="width: 512px;">
    <li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I"
    rel="test1@gmail.com"
    class="bit-box">test1@gmail.com<a href="#" class="closebutton"></a>
    </li>
    <li id="pt_9O0pMJDhtNbRgU1vNM8He8Vh9zpJ1tcE" 
    rel="test2@gmail.com"
    class="bit-box">test2@gmail.com<a href="#" 
    class="closebutton"></a>
    </li>
    <li id="pt_U8JH5E9y5w4atm4CadEPvuu3wdh3WcBx" 
    rel="test3@gmail.com" 
    class="bit-box">test3@gmail.com<a href="#"
    class="closebutton"></a></li>
    <li id="Project_update_user_id_annoninput" 
     class="bit-input">
     <input type="text" autocomplete="off" size="0" class="maininput"></li>
    </ul>


<input id="removeuser" value="" />

そのliをクリックしたときに、liの値を非表示の入力ボックスに保存する必要があります。最初の 2 つの li をクリックすると、次のような値を保存する必要があります。

<input id="removeuser" value="test1@gmail.com,test2@gmail.com" />

つまり、li をクリックするたびに入力値を追加する必要があります。

私は1つ下を使用しました、

jQuery(document).ready(function(){                

       jQuery("a.closebutton").click(function(){

          jQuery("input#removeuser").val(jQuery.map(jQuery(this).parent().attr('rel')).join(","));

        });

    });

しかし、それは機能しません.どうすればそれを行うことができますか?

4

5 に答える 5

2

http://jsfiddle.net/ySV6F/

jQuery(document).ready(function(){                
   jQuery("a.closebutton").click(function(){
      jQuery("input#removeuser").val(jQuery("input#removeuser").val() + "," + jQuery(this).parent().attr('rel'));
      $(this).remove();
       return false;
    });
});​
于 2012-09-03T10:08:48.943 に答える
1

このフィドルはあなたの問題を修正します: http://jsfiddle.net/pratik136/zVmwg/

最初に行った変更は、テキストを<a />タグ内に移動することでした。これにより、期待どおりにクリックできるようになりました。

次に、次のように変更しJSました。

jQuery(document).ready(function() {
    jQuery("a.closebutton").click(function(a) {
        var v = jQuery(this).parent().attr('rel');
        var t = jQuery("input#removeuser").val();
        if (t.indexOf(v) < 0) {
            if(t.length>0){
                t += ",";
            }
            jQuery("input#removeuser").val(t + v);
        }
    });
});​

重複が入力されていないこと、および必要な場合にのみカンマが追加されていることを確認するために、追加のチェックを追加しました。

于 2012-09-03T10:08:26.947 に答える
1

試す：

var arr = [];
$(".closebutton").click(function(e) {
    e.preventDefault();
    var email = $(this).parent("li").attr("rel");
    if( $(this).hasClass("added") ) {
        arr= $.grep(arr, function(value) {
            return value != email;
       });
        $(this).removeClass("added");
    }
    else {
        arr.push( email );
        $(this).addClass("added");
    }
    $("input[id='removeuser']").val( arr.join(",") );
});
于 2012-09-03T10:12:17.007 に答える
0

動作中のコードをjsFiddleに置いたので、動作を確認できます。

jQuery(document).ready(function(){                

jQuery("a.closebutton").bind('click', function(){
    var data = $(this).parent().attr('rel');
    if($("#removeuser").val() == ""){        
        $("#removeuser").val(data);
    } else {
        $("#removeuser").val(", "+data);
    }
    $(this).parent().hide();
});

});​

liここでは、一度クリックしたものを削除しています。この.toggle()関数を使用して、ユーザーが値を削除できるようにすることもできます#removeuser。お役に立てれば！

于 2012-09-03T10:21:02.673 に答える
0

まず、rel属性 (特定のタグを持つ (X)HTML で特定の意味を持つ) を使用する代わりに、html セーフdata-*属性を使用することをお勧めします。

このような：

<li id="pt_5uZqW99dmlgmiuCTJiPHDC9T9o2sfz0I" data-email="mdineshkumarcs@gmail.com" 
class="bit-box">mdineshkumarcs@gmail.com<a href="#" class="closebutton"></a></li>

この属性にアクセスするには、jQuery を使用するだけです$(elem).attr('data-email')

重複のないソリューション：

jQuery(document).ready(function(){
    jQuery("a.closebutton").click(function(){
        var value = $(this).parent().attr('data-email');
        var values = $("input#removeuser").val().split(',');
        var is_in = false;
        // already in?
        $.each(values, function(i, e){
            if(e == value) {
                is_in = true; return false; // set and exit each
            }
        });
        if (!is_in) {
            values.push(value);
            $("input#removeuser").val(values.join(','));
        }

        return false;
    });
})
于 2012-09-03T10:11:03.510 に答える