使用 jQuery 选择两个元素，突出显示选择器答案

【问题标题】：Selecting TWO elements with jQuery, Highlighting selectors使用 jQuery 选择两个元素，突出显示选择器
【发布时间】：2013-02-08 16:58:58
【问题描述】：

我在<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。

谢谢！

【问题讨论】：

when users click on a div element, 点击 ??或者你的意思是悬停？？？因为我在您发布的代码中找不到点击事件...或者您错过了它？？
我看不到您的代码执行您所说的任何操作。没有任何 click 处理程序
你能发布你的 HTML 吗？
@bipen 很抱歉造成混乱，真的很晚了，我以为我点击了它。但它的悬停。我试图获得点击并改写我的问题
@Alexander 请查看我的更新帖子，抱歉造成混淆

标签： jquery jquery-selectors

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：