Изменение нескольких элементов div css на основе результатов возврата .filter

Question

Я пытаюсь сделать быструю проверку текста через Jquery, текст вводится через API

jQuery(function($){
        $('cite.fn').filter(function () {
        return ["Van", "Motorbike", "Truck"].includes($(this).text());
        }).css('color', 'red');
});

HTML:

<cite class="fn"><?php echo $json['vehicle']; ?></cite> 

Это отлично работает , как по очереди, красный текст - если ответом является Ван, Грузовик или Мотоцикл

Однако, что должно произойти, если это Ван, Грузовик или Мотоцикл, тогда этот div должен показать

    <div class="citefailed">Sorry we can not offer <?php echo $json['vehicle']; ?> 
Schemes at this time - Then a load of buttons and stuff is inside this div too</div>

Если Тип транспортного средства - Автомобиль, то этот div показывает

<div class="cited"> continue the form blah blah</div>

То, что я пробовал, это

    jQuery(function($){
        $('cite.fn').filter(function () {
        return ["Van", "Motorbike", "Truck"].includes($(this).text());
        }).css('color', 'red');
        $(".cited").css({display: "none"});
        $(".citefailed").css({display: "block"});
   });

, а css имеет

.citefailed{display:none;}
.cited{display:block;}

Но это просто добавляет Display None к цитируемому div и блок display к citefailed div, будь то машина или фургон.

Пожалуйста, смотрите скрипку https://jsfiddle.net/hatorex1/1/

Могу ли я посоветовать, пожалуйста,

Answer 1

https://jsfiddle.net/akshayrathnavas/1yLv8r7k/16/

Я внес изменение, просто CSS и очень простое JavaScript изменение одного слова.

jQuery(function($){
        $('cite.fn').filter(function () {
        return ["Van", "Motorbike", "Truck"].includes($(this).text());
        }).addClass('red');
});

И CSS

cite.fn + .citefailed{display:none;}
cite.fn.red{ color: red;}
cite.fn.red + .citefailed{display:block;}
cite.fn.red + .citefailed + .cited {display:none;}

Вы также можете сделать $ ('. Citefailed'). Show () или hide () в зависимости от условий.

Answer 2

вы можете сделать что-то вроде этого:

jQuery(function($){
    var $filtered = $('cite.fn').filter(function () {
    return ["Van", "Motorbike", "Truck"].includes($(this).text());
    });

    $filtered.css('color', 'red');
    if($filtered.length>0){
        $(".cited").css({display: "none"});
        $(".citefailed").css({display: "block"});
    }else{
        $(".cited").css({display: "block"});
        $(".citefailed").css({display: "none"});
    }
});

скрипка: https://jsfiddle.net/mgwpo0nc/2/