Выделите элемент в активном DIV

Я хочу выделить элемент span(class = "tiny"), когда его div активен или щелкнул любой из его элементов...

Я уже пытался выделить этот элемент, но безуспешно... смог выделить только весь div....

$('.main-class').on('click', '.row-fluid', function() {
    $(this).parent().find('.tiny').css('background-color', '');
    $(this).css('background-color', '#00fff0');
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class = "main-class">
    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123395</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123987</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" tabindex = "1" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" tabindex = "1" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Хотите выделить только....span class = "tiny".. значения, когда какой-либо элемент в class = "panel-body" активен.

«СТРОГО ИСПОЛЬЗУЯ JQUERY И JS.... поскольку не может добавить к нему файл css» Так что используйте JavaScript, чтобы добавить элемент style с необходимыми правилами.

— 24.04.2019 15:59

Дайте определение «изюминке».

— 24.04.2019 15:59

привет T.J выделяя текст элементов цветом

— 24.04.2019 16:00

Да, но как? Цвет фона? Цвет переднего плана?

— 24.04.2019 16:01

Если я щелкну строку в вашем примере, она получит голубой фон. Что он делает/не делает, чего вы хотите, чтобы он не делал/не делал?

— 24.04.2019 16:01

Фоновый цвет.......

— 24.04.2019 16:02

Я думаю, вы хотите '$(this).find('.tiny').css('background-color', '#00fff0');' чтобы выделить только .tiny span.

— 24.04.2019 16:03

возможно, вам следует изменить на $(this).parent().find('.tiny').css('background-color', '#00fff0');

— 24.04.2019 16:03

@CarlosMartins, спасибо, чувак.......решено

— 24.04.2019 16:05

javascript jquery html css

24.04.2019 15:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

 $('.main-class').on('click', '.row-fluid', function() {
            $(this).parent().find('.tiny').css('background-color', '');
            $(this).parent().find('.tiny').css('background-color', '#00fff0');
 });

24.04.2019 16:03

Я бы использовал CSS:

Добавьте класс для выделения
При щелчке удалите этот класс из любого элемента, у которого он есть, и добавьте его к элементу для щелчка.

Очевидно (из комментариев), хотя ваш код вызывает css непосредственно на $(this), вы хотите найти .tiny, поэтому я также обновил его, чтобы сделать это.

Если по какой-то причине вы не можете добавить CSS (в ранней версии вашего вопроса говорилось, что вы не можете), вы можете добавить элемент style с помощью JavaScript.

Пример:

$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});

.highlight {
  background-color: #00fff0;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class = "main-class">
    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123395</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123987</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" tabindex = "1" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" tabindex = "1" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Пример добавления элемента style с кодом:

$("<style>")
.text(".highlight { background-color: #00fff0; }")
.appendTo(document.head);
$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class = "main-class">
    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123395</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class = "panel-body" style = "border: 1px solid black;margin: 5px;">
        <div class = "row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class = "col-md-1">
                <span>I am up</span><br>
                <span class = "tiny">ID no -123987</span>

            </div>
            <div rel = "tooltip" style = "display: flex; justify-content: flex-end;">
                <div class = "radio">
                    <label class = "lead">
                        <input id = "1" name = "one" tabindex = "1" required = "required" value = "yes" type = "radio">
                        Yes
                    </label>
                    <div class = "radio">
                        <label class = "lead">
                            <input id = "1" name = "one" tabindex = "1" required = "required" value = "No" type = "radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

24.04.2019 16:03

Другие вопросы по теме

При выполнении запроса ajax, как я могу использовать переменную jquery в параметре url, который использует С#?

Изменить класс bg, если флажок установлен

Как удалить из таблицы строки, не равные определенному значению?

Как сделать выпадающий множественный выбор?

Добавить параметр в jquery

В jquery, как добавить элемент списка добавления в ul, извлекаемый из поля ввода

Как изменить значение свойств переменной SASS, если URL-адрес страницы содержит определенный текст?

Как избежать повторения похожего кода в jQuery?

Изменить текст «поиск» в jquery select2

Как получить 2 выбранных значения одновременно?

Выделите элемент в активном DIV

Ответы 2

Другие вопросы по теме

Похожие вопросы