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

2024-05-04 • 问答

如果用户单击，则使用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>

问题是当您获取带有空格的文本时。使用.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>

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

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

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

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

要通过ID获得理想的结果，这是此用例的一种较好做法，您只需按以下方式匹配ID：

HTML：

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

CSS：

#Mathematics { }

jQuery：

$("#Mathematics")

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

xiaoyong28860 回答：从Javascript中选择的选项卡捕获文本

大家都在问