Как настроить таргетинг только на текущий элемент Div, имеющий целевой элемент

77awesome77

Привет, у меня есть несколько классов div (одиночное радио), каждый из которых содержит переключатель с классом (красный), который при нажатии расширяет div с классом (красный), проблема в том, что он расширяет все остальные элементы div с классом (красный). Я только хотите расширить класс div (красный) внутри его класса-контейнера (радио-сингл).

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box{
 padding: 20px;
 display: none;
 margin-top: 20px;
 border: 1px solid #000;
}

.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }

</style>

<script type="text/javascript" src="[URL='https://lumtu.com/yti/au44uanNodHRwOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS5taWt5S']http://code.jquery.com/jquery.min.js[/URL]"></script>

<script type="text/javascript">

jQuery(function($) {

 $('input[type="radio"]').click(function(){
 if($(this).attr("class")=="red"){
 $(".box").not(".red").hide();
 $(".red").show();
 }

 if($(this).attr("class")=="green"){
 $(".box").not(".green").hide();
 $(".green").show();
 }

 if($(this).attr("class")=="blue"){
 $(".box").not(".blue").hide();
 $(".blue").show();

 }
 });
});
</script>
</head>

<body>
 <div>
 <div class="radio-single">
 <label > red</label>
 <input class="red" type="radio" name="colorRadio" value="red">
 <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>

 <br />

 <div class="radio-single">
 <label>green</label>
 <input class="green" type="radio" name="colorRadio" value="green">
 <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
 </div> 
 <br />

 <div class="radio-single">
 <label>blue</label>
 <input class="blue" type="radio" name="colorRadio" value="blue">
 <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>

 <br />

 <div class="radio-single">
 <label > copy</label>
 <input class="red" type="radio" name="colorRadio" value="red">
 <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>

 </div>

</body>
</html>

HTML:

2dccksmb

Привет, мне удалось заставить его показывать только тот div (красный), который содержит радио, по которому он щелкнул, но проблема в том, что когда я нажимаю на другой переключатель, он не скрывает предыдущий нажатый, не знаю, как мне закрыть любой другой переключатель, который открыт?

 jQuery(function($) {
 $('input[type="radio"]').click(function(){
 if($(this).attr("class")=="red"){

 $(".box").not(".red").hide();
 $(this).parents(':eq(1)').find(".red").show();

 }

 if($(this).attr("class")=="green"){
 $(".box").not(".green").hide();
 // $(".green").show();
 }
 });

Код (разметка):

Ybpxi3

Это также можно использовать в CSS (селектор) для присвоения значений заданным классам или идентификаторам (особенно автоматически генерируемым, где у вас есть похожие шаблоны либо в начале, как здесь, либо в конце (если в конце вы переключаете от ^ до $)

Imperiaseo

Ну вот: https://jsfiddle.net/syds259w/

Я думаю, ты этого хотел? Код также стал намного проще, и я исправил некоторые незначительные проблемы.

Klaos27

Будет ли что-то подобное работать и с addClass/removeClass? Я новичок в JavaScript и не могу найти способ сделать этот Codepen (http://codepen.io/designoneweb/pen/OWYpZG

) проще. Мне нужно использовать отдельные идентификаторы DIV. Функция .parent сделала бы это намного проще и позволила бы мне легко интегрировать это в цикл WordPress.

WhiteRock

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

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box{
 padding: 20px;
 display: none;
 margin-top: 20px;
 border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>

<script type="text/javascript" src="[URL='https://lumtu.com/yti/au44uanNodHRwOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS5taWt5S']http://code.jquery.com/jquery.min.js[/URL]"></script>
<script type="text/javascript">

jQuery(function($) {
 $('input[type="radio"]').click(function() {
 // hide all boxes
 $('.box').hide();

 // show only sibling
 $(this).siblings('.box').show();
 });
});
</script>
</head>

<body>
 <div>
 <div class="radio-single">
 <label>red</label>
 <input class="red" type="radio" name="colorRadio" value="red">
 <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>
 <br>
 <div class="radio-single">
 <label>green</label>
 <input class="green" type="radio" name="colorRadio" value="green">
 <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
 </div>
 <br>
 <div class="radio-single">
 <label>blue</label>
 <input class="blue" type="radio" name="colorRadio" value="blue">
 <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>
 <br>
 <div class="radio-single">
 <label > copy</label>
 <input class="red" type="radio" name="colorRadio" value="red">
 <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div>
 </div>
 </div>
</body>
</html>

HTML:

Ayakunin

Только что увидел этот пример. Чистый яваскрипт:
http://jsfiddle.net/cqscc48g/136/

CSS/HTML

 
<script type='text/javascript'>//<![CDATA[

function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
document.getElementById("select4").onclick = function() { ChangeColor("orange"); }
//]]>

</script>

Код (разметка): JAVASCRIPT:

  <style type="text/css"> .colorDiv{ width:50px; height:50px; background-color:red; } </style> <input id="select1" name="test" type="radio" checked /> <label for="select1">Red</label> <input id="select2" name="test" type="radio" /> <label for="select2">Green</label> <input id="select3" name="test" type="radio" /> <label for="select3">Blue</label> <input id="select4" name="test" type="radio" /> <label for="select4">Orange</label> <div class="colorDiv"></div>

Код (разметка):

AspellTweplaY

1) где находятся ваши атрибуты FOR, чтобы связать ваш LABEL с вашим вводом. 2) Если текст только скриптовый, то какого хрена он в разметке? 3) Хотя, если вы собираетесь поместить это в разметку, какого черта вы используете jquery для выполнения работы CSS.

Вы ДЕЙСТВИТЕЛЬНО так беспокоитесь о поддержке IE8/более ранних версий?!? Это ПОТРЯСАЮЩИЙ пример того и другого.

JavaScript ни для чего и все не так с jQuery! Особенно с бесконечными бессмысленными классами, когда у вас есть совершенно хороший внешний DIV, обертывающий все... это, ВЕРОЯТНО, должно быть набором полей внутри ФОРМЫ в производстве, а НЕ DIV. Точно так же те БР зря действительно подложили герпу в этого сумасшедшего. небольшая придирка: допустимый DOCTYPE тоже может помочь, поскольку устаревшие UA распознают только верхний регистр для части

Кроме того, сейчас 2017 год, вам больше не нужно говорить type="text/css" в

Похожие темы	Дата
Javascript Для Чайников (крис Минник)	19.12.2024, 05:12
Школа Программирования. Javascript	19.12.2024, 05:12
[geekbrains] Javascript. Интерактивные Веб-приложения	19.12.2024, 05:12
[Мелюков Сергей] Курс Loftschool Комплексное обучение JavaScript 2020	19.12.2024, 05:12
[специалист] Эксперт По Программированию На Javascript	19.12.2024, 05:12
[дмитрий Лаврик] Jqueryui [2014]	19.12.2024, 05:12
Lynda.com Javascript: Функции	19.12.2024, 05:12
Илья Кaнтop. Современный Учебник Javascript	19.12.2024, 05:12
[lynda.com] - Создание Мобильных Web-приложений Используя Jquery Mobile (2014)	19.12.2024, 05:12
Нужна помощь с флажком	19.12.2024, 05:12

Как настроить таргетинг только на текущий элемент Div, имеющий целевой элемент

77awesome77

2dccksmb

Ybpxi3

Imperiaseo

Klaos27

WhiteRock

Ayakunin

AspellTweplaY

I AM

Интересно