从 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，就像您一样不能 select 通过 CSS select 或

的文本

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

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

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

要使用 ID 实现预期结果（对于此用例而言这是一种更好的做法），您只需按如下方式与您的 ID 匹配：

HTML:

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

CSS:

#Mathematics { }

JQuery:

$("#Mathematics")

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

Capturing Text from tab selected in Javascript

javascript

jquery

tabs