个人中心
gpt4 book ai didi

javascript - 使用标签上的 jQuery .mouseenter 突出显示段落中的单词？

转载 作者：行者123 更新时间：2023-12-01 03:58:24 24 4
gpt4 key购买 nike

我已经存储了一个变量，当我鼠标输入时我的标签的文本，现在如果它在段落文档中，在突出显示中，如颜色或粗体 .css() 中，我会放置相同的单词

这是我的代码，警报让我知道我在 var 'leContenu' 中放入了哪些文本:

    var leContenu;
    $('.chip').on('mouseenter mouseleave', function(e) {
        if (e.type === 'mouseenter'){
            $(this).siblings(".chip").not(".noselect").stop(true, true).animate({'opacity': '0.7'}, 'fast');
            //alert ($(this).text());
            leContenu = $(this).text();

            $('p').find(leContenu).css('color', 'red');

    //another try
            /*
            return this.html(function() {
                alert ($(this).text());
                $('p').wrapInner(leContenu).css('color', 'red');
            });
            */
    //end another try

        }
        else{
            $(this).siblings(".chip").stop(true, true).animate({'opacity': '1'}, 'fast');
        }
    });

Html 在这里:

        <div class="var-category">
        <p class="title-category">Zone de communication</p>
        <div class="chips">
            <p class="chip">@ville</p>
            <p class="chip">@cp</p>
            <p class="chip">@ville1</p>
            <p class="chip">@ville2</p>
            <p class="chip">@ville3</p>
            <p class="chip noselect">@ville4</p>
            <p class="chip">@loc</p>
            <p class="chip">@dpt</p>
        </div>
    </div>

    <div class="container">
            <div class="Tcard">
                <div class="title-page">
                    <h2 class="h2popout">Edition de contenu n°1</h2>
                </div>
                <ul class="collapsible popout collapsible-accordion" data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">subtitles</i>First</div>
                        <div class="collapsible-body">
                            <p>Ce paragraphe présente les prestations client sous forme de liste à puce</p>
                            <a href="#"><strong>Contribution</strong> H2</a>
                            <p>Phrases</p>
                            <p>Liste à puce + liens internes</p>
                            <p>CTA</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
                        <div class="collapsible-body">
                            <p><strong class="tagVar">BML</strong> est une <span class="tagVar">@ville</span> spécialisée dans la fission nucléaire, dans le Rhône : à <span class="tagVar">Lyon</span>.</p>
                            <p>Nous proposons tout plein de jolis champignons à nos clients afin de développer une synergie
                            dans la confection de réseaux créatif. Il est important de noter l'impact écologique de nos centrales
                            en <span class="tagVar">carton</span>. <span class="tagVar">Contactez-nous</span> pour plus d'informations sur le sujet.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>

我不明白哪个函数可以让我在 中搜索和修改

有人知道吗？

最佳答案

我终于得到了一个适用于此的代码

var leContenu;
var repl;
$(document).on("mouseenter mouseleave", "#chip", function(e) {
	if(e.type == 'mouseenter'){
		if($('#body').find('.myClass').length > 0){
			$('#body').find('.myClass').css("color", "red");
		}else{
			leContenu = $(this).text().trim();
						
			var rgxp = new RegExp("\\b" + leContenu + "\\b" , 'gi');
			repl = '<span class="myClass">' + leContenu + '</span>';
			
			$('#body').html($('#body').html().replace(rgxp, repl));
		}
	}else{
		$('#body').find('.myClass').css('color', "black");
	}
});
.myClass{
	color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
  <div>
    <div id='chip' class=".chip">
      Test
    </div>
  </div>a
  
<h1>HTML Test Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean test, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem test dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</body>

关于javascript - 使用标签上的 jQuery .mouseenter 突出显示段落中的单词？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42419166/

24 4 0
文章推荐： python - 用Python计算自相关函数
文章推荐： meteor - 如何检测 Meteor 中 react 性元素何时更新
文章推荐： jquery - 计算特定的td并显示在其他td中
文章推荐： javascript - Angular2 - 在进行下拉值选择时将动态加载的参数传递给函数