从Javascript中选定的选项卡捕获文本

Question

我使用Jquery在一些标签上工作，如果用户点击了一个特定的标签，我试图捕获所选标签的文本，如果点击的标签的文本匹配，但它没有显示，则执行一些操作。

~热心的帮助？

​

let selected = false;
$(".columns").click(function () {
    if (selected =! selected) {
        var subject = $(this).text();
        //alert(subject);
        if(subject == "Mathematics"){
            alert('Maths');
        }
        else if(subject == "English"){
            alert('Eng');
        }
        else{
            alert('Others');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

​

Answer 1

问题是，当你得到文本时，它是带空格的。使用.trim()删除它们。

​

let selected = false;
$(".columns").click(function () {
    if (!selected) {// means false
        var subject = $(this).text();
        //alert(subject);
        if(subject.trim() == "Mathematics"){
            alert('Maths');
        }
        else if(subject.trim() == "English"){
            alert('Eng');
        }
        else{
            alert('Others');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="columns">
        <label>
            <div>
                <span>Mathematics</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>English</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Swahili</span>
            </div>
        </label>
    </li>

    <li class="columns">
        <label>
            <div>
                <span>Religious</span>
            </div>
        </label>
    </li>
</ul>

​

Answer 2

如果内容是静态的，我建议添加ID，因为这会强制执行唯一的命名，但是，为了回答您的问题，如果您希望通过名称匹配选项卡，我建议使用XPath，因为您不能使用CSS选择器按文本进行选择

//*[text()="Mathematics"]

如果您复制上述内容并将其粘贴到dev tools中，它应该会显示突出显示的匹配项。要将其与jQuery一起使用，请使用

$(document).xpathEvaluate(//*[text()="Mathematics"])

为了使用ID实现所需的结果，这对于这个用例来说是一个更好的实践，您只需按如下方式匹配您的ID：

HTML：

<span ID="Mathematics">Mathematics</span>

CSS：

#Mathematics { }

JQuery：

$("#Mathematics")