0

<div>タグにアイテムのリストがあり、ユーザーが要素にカーソルを合わせると強調表示されます。

現在、ユーザーがクリックする2 つの要素を選択できるようにする方法を見つけようとしています。ユーザーが要素をクリックすると、強調表示されます。

2 つの項目を選択した後、選択した項目の 1 つを選択解除して (強調表示を非表示にする)、別の項目を選択しない限り、ユーザーは選択できなくなります。

これは可能ですか？

私の現在のホバー：

                // hovers over element
                $('.media-search').hover(function(){
                    var $this = $(this);
                    // highlighting the object
                    $this.toggleClass('selectMedia');

                    $this.find('.next-btn').show();

                },function(){
                    var $this = $(this);

                    // removing the object
                    $this.removeClass('selectMedia');
                    $this.find('.next-btn').hide();
                });

.selectMedia.media-search私のdivを強調するCSSです。

ありがとう！

4

2 に答える 2

2

あなたの質問から、次のようなことを達成しようとしているように見えます:

$('.media-search').hover(function(){
    $(this).toggleClass('highlight');
}).click(function(){

    if($('.selectMedia').length < 2 || $(this).hasClass('selectMedia'))
    {
        $(this).toggleClass('selectMedia');
    }
    else
        alert('please unselect one row');
});

JsFiddleはこちら

于 2013-02-08T08:58:58.737 に答える
0

Every time you click, you just count the number of items that has that class, and if it is more than two you return without doing something or you display a message that they must deselect one before they can select one more. You just use .lengt or size() to count the items in your div that has that class.

$(".classname).size() or .lengt gives you the number of elements that has that class

于 2013-02-08T07:35:01.237 に答える