0

<div>我在标签中有一个项目列表，当用户将鼠标悬停在我的元素上时，它会突出显示。

现在我试图弄清楚如何允许用户选择两个元素来点击。当用户单击元素时，它应该被突出显示。

选择两个项目后，用户应该不能再选择，除非他们取消选择一个已选项目（使突出显示消失）然后选择其他项目。

这可能吗？

我目前的悬停：

                // 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-searchdiv 的 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

每次单击时，您只需计算具有该类别的项目数，如果超过两个，您无需执行任何操作就返回，或者显示一条消息，他们必须先取消选择一个，然后才能再选择一个。您只需使用 .lengt 或 size() 来计算 div 中具有该类的项目。

$(".classname).size() 或 .lengt 为您提供具有该类的元素的数量

于 2013-02-08T07:35:01.237 回答