Question

我有一个<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-search div。

的CSS

谢谢！

Answer 1

从您的问题来看，您似乎正在努力实现以下目标：

$('.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是here

Answer 2

每次点击时，您只需计算具有该类别的项目数量，如果超过两项，则无需执行任何操作即可返回，或者您显示一条消息，表明他们必须取消选择一项才能再选择一项。您只需使用.lengt或size（）来计算div中具有该类的项目。

$（“。classname”.size（）或.lengt为您提供具有该类的元素数

使用jQuery选择TWO元素，突出显示选择器

2 个答案: