Захват текста с вкладки, выбранной в 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

Если содержимое статичное, я бы порекомендовал добавить идентификаторы, поскольку это требует уникального именования, однако, чтобы ответить на ваш вопрос, если вы хотите сопоставлять вкладки по их имени, я бы предложил использовать XPath, как вы можете '• Выделите по тексту с помощью селекторов CSS

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

Если вы скопируете вышеизложенное и вставите его в инструменты разработчика, он должен показать выделенные совпадения. Чтобы использовать его с jQuery, используйте

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

. Для достижения желаемого результата с помощью идентификаторов, что является лучшей практикой для данного варианта использования, вы просто сопоставляете свой идентификатор следующим образом:

HTML:

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

CSS:

#Mathematics { }

JQuery:

$("#Mathematics")