使用.text（）选择一个类，但在html中有空格问题

Question

$('li.' + $(this).text()).toggle(true);

此代码用于从下面的子区域获取。

<div class="subNav">
        <ul>
     <li class="button">sun protective clothing</li>
        </ul>
 </div>

这些是可见的产品。

<div class="sun-protective-clothing"></div>

Answer 1

您必须使用JavaScript的replace（）函数将所有空格替换为破折号。使用replace(" ", "-")这样的注意事项只会替换字符串中第一个空格实例。您必须使用全局搜索的RegEx来替换所有实例;例如/ /g

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

Answer 2

您需要用破折号替换空格。试试

$('li.' + $(this).text().replace(/ /g, "-")).toggle(true);

Answer 3

我建议不要使用li里面的文字做这样的事情：

<div class="subNav">
    <ul>
 <li class="button" target="sun-protective-clothing">sun protective clothing</li>
    </ul>
</div>

和

$('.' + $(this).attr("target")).toggle(true);

通过这种方式，您可以在li中放置任何您想要的内容，而不会影响您的逻辑。