Как настроить таргетинг только на текущий элемент 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:

Alex.1

Привет, мне удалось заставить его показывать только тот 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();


}


});

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

mony1

Это также можно использовать в 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>

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

Александр Мольков

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

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

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

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

Похожие темы	Дата
Игрушки на JavaScript	19.10.2024, 18:10
(smartme) Let Ecmascript 6 (новый Стандарт Javascript)	19.10.2024, 18:10
Курс по Angular.JS - Кантор (2016)	19.10.2024, 18:10
[lynda.com] Javascript События [rus]	19.10.2024, 18:10
Javascript с самого начала	19.10.2024, 18:10
[javascript.ru] Курс По Node.js	19.10.2024, 18:10
jQuery и setTimeout перестают работать в Internet Explorer 11	19.10.2024, 18:10
В vue.js используйте формат timeago.	19.10.2024, 18:10
Flatpickr первый день недели в понедельник и сокращенно CurrentMonth	19.10.2024, 18:10
Современный учебник JavaScript - Кантор (2015)	19.10.2024, 18:10

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

77awesome77

Alex.1

mony1

imperiaseo

klaos27

WhiteRock

Ayakunin

Александр Мольков

I AM

Интересно