Jquery 突出显示p标记，但不突出显示其旁边的标记

我的网页上有一个部分，用户必须能够轻松地选择文本，以便他们可以随时将其粘贴到其他地方。我的问题是，我有两个段落紧挨着彼此，当他们选择一个段落时，它会自动想选择它旁边的一个段落

在我的其他元素中，我有类似的东西来阻止选择

-webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;

但我不想阻止他们选择它，只是不能同时选择两者。有没有办法做到这一点

这就是这两段的内容

他们目前正在做什么

我希望他们做什么

我的html看起来像这样

<div class="span12">
  <h4>Title</h4>
  <div class="span3">Photo</div>
  <div class="span4"><p>Text</p></div>
  <div class="span5"><p>Text</p></div>
</div>

标题
照片
正文

正文

那么您似乎想突出显示开始突出显示的

标记，但不想突出显示任何被拉入选择的标记？这不会在选择过程中停止重叠选择，但会在使用一些js后纠正它（如果不使用它，则不需要jquery）：

选择功能来自：

---

这是一个。

听起来像是在寻找一个jQuery，它将点击事件绑定到所有

标记，并将所有未点击标记的CSS更改为

用户选择：无。松开鼠标后，将所有
标签更改回正常
用户选择：全部

我的代码是一种资源密集型代码，因此您可能希望根据自己的喜好改进选择器


HTML

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partu
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>

JS

.select_off{
    -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

$(document).ready(function(){

    // Mouse was clicked down
    $(document).on('mousedown', 'p', function(){

        // Give all <p> tags an ID if they do not have one
        var i = 1;
        $('p').each(function(){

            if(!$(this).attr('id')){
                $(this).attr({'id':'unique_'+i+'id'});
            }

            i += 1;
        });

        var p_clicked = $(this);
        var p_clicked_id = p_clicked.attr('id');

        // Loop through <p> tags and add the .select_off class
        $('p').each(function(){
            if($(this).attr('id') != p_clicked_id){
                $(this).addClass('select_off');
            }
        });
    });

    // Mouse was released
    $(document).on('mouseup', 'p', function(){

        // Loop through <p> tags and remove the .select_off class
        $('p').each(function(){
            $(this).removeClass('select_off');
        });
    });
});

var originalEl;
document.addEventListener('mousedown', function(e){
  if(originalEl) originalEl.className = "";
  if(e.target.tagName == "P"){
    originalEl = e.target;
    originalEl.className = "select-on";
  } else originalEl = null;
});

p{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

p.select-on{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -o-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

$（文档）.ready（函数（）{
//鼠标被点了下来
$（document）.on（'mousedown'，'p'，function（）{
//如果所有标签没有ID，则为其提供ID
var i=1；
$（'p'）。每个（函数（）{
if（！$（this.attr（'id'））{
$（this.attr（{'id'：'unique_'+i+'id'）；
}
i+=1；
});
var p_clicked=$（此项）；
var p_clicked_id=p_clicked.attr（'id'）；
//循环通过标记并添加。选择\u off class
$（'p'）。每个（函数（）{
if（$（this.attr（'id'）！=p\u单击\u id）{
$（this.addClass（'select_off'）；
}
});
});
//老鼠被释放了
$（document）.on（'mouseup'，'p'，function（）{
//循环通过标记并移除。选择\u off class
$（'p'）。每个（函数（）{
$（this.removeClass（'select_off'）；
});
});
});
这里有一个非jquery的方法来实现@MonkeyZeus的建议：

JS

.select_off{
    -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

$(document).ready(function(){

    // Mouse was clicked down
    $(document).on('mousedown', 'p', function(){

        // Give all <p> tags an ID if they do not have one
        var i = 1;
        $('p').each(function(){

            if(!$(this).attr('id')){
                $(this).attr({'id':'unique_'+i+'id'});
            }

            i += 1;
        });

        var p_clicked = $(this);
        var p_clicked_id = p_clicked.attr('id');

        // Loop through <p> tags and add the .select_off class
        $('p').each(function(){
            if($(this).attr('id') != p_clicked_id){
                $(this).addClass('select_off');
            }
        });
    });

    // Mouse was released
    $(document).on('mouseup', 'p', function(){

        // Loop through <p> tags and remove the .select_off class
        $('p').each(function(){
            $(this).removeClass('select_off');
        });
    });
});

var originalEl;
document.addEventListener('mousedown', function(e){
  if(originalEl) originalEl.className = "";
  if(e.target.tagName == "P"){
    originalEl = e.target;
    originalEl.className = "select-on";
  } else originalEl = null;
});

p{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

p.select-on{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -o-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

CSS

.select_off{
    -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

$(document).ready(function(){

    // Mouse was clicked down
    $(document).on('mousedown', 'p', function(){

        // Give all <p> tags an ID if they do not have one
        var i = 1;
        $('p').each(function(){

            if(!$(this).attr('id')){
                $(this).attr({'id':'unique_'+i+'id'});
            }

            i += 1;
        });

        var p_clicked = $(this);
        var p_clicked_id = p_clicked.attr('id');

        // Loop through <p> tags and add the .select_off class
        $('p').each(function(){
            if($(this).attr('id') != p_clicked_id){
                $(this).addClass('select_off');
            }
        });
    });

    // Mouse was released
    $(document).on('mouseup', 'p', function(){

        // Loop through <p> tags and remove the .select_off class
        $('p').each(function(){
            $(this).removeClass('select_off');
        });
    });
});

var originalEl;
document.addEventListener('mousedown', function(e){
  if(originalEl) originalEl.className = "";
  if(e.target.tagName == "P"){
    originalEl = e.target;
    originalEl.className = "select-on";
  } else originalEl = null;
});

p{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

p.select-on{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -o-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

您所呈现的HTML毫无意义，因为您正在谈论标题中的
标记。请修改并更新您的帖子。@MonkeyZeus抱歉，我忘记了div中的p标记，我打字太快了。没问题，您能制作一个小的JSFiddle来复制这个问题以补充您的帖子吗？@MonkeyZeus我是说他们的p标记中有文本…没关系，但是听起来您正在寻找一个jQuery，它将
点击
事件绑定到所有
标记，并将所有未点击标记的CSS更改为
用户选择：无。松开鼠标后，将所有
标签更改回正常
用户选择：全部。这是对的吗？非常感谢你的帮助！尽管我没有选择页面上的所有p，但是否仍有针对特定类名的p标记？是的，如果（e.target.tagName==“p”&&e.target.className==“single select”）originalEl=e.target，则第三行看起来像
if（e.target.tagName==“p”&&e.target.className==“single select”）你统治，你真的统治！非常感谢。我本来想做那样的事，但我有个主意。在班名前……傻我！：）