#jquery #html #css
#jquery ( jquery ) #HTML #css — код
Вопрос:
У меня есть два переключателя. нажав на один переключатель, вы получите внешнюю границу с цветом. при нажатии на другой переключатель появится внутренняя граница, которая окружает изображение.
<!DOCTYPE html>
<html>
<head>
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
.container1{
float:left;
width:33%;
height:456px;
display:inline-block;
}
#h{
color:black;
font-style:none;
}
.grid{
padding:10px;
width:93%;
border:1px solid white;
height:310px;
}
img{
margin:5px;
}
.right1{
padding-left:80px;
display:inline-block;
width:20%;
height:300px;
border:1px solid black;
}
#tele1{
border:1px solid white;
}
#tele2{
border:1px solid white;
}
#tele3{
border:1px solid white;
}
#tele4{
border:1px solid white;
}
#button1{
width:100px;
margin-top:40px;
}
#button2{
width:100px;
margin-top:20px;
}
.right2{
float:right;
width:30%;
height:300px;
}
</style>
<script>
$(document).ready(function(){
$("#kar1").click(function(){
var thik=$("#kar1").attr('src');
$("#tele1").attr('src',thik)
$("#tele1").fadeToggle();
});
$("#kar2").click(function(){
var thik1=$("#kar2").attr('src');
$("#tele2").attr('src',thik1)
$("#tele2").fadeToggle();
});
$("#kar3").click(function(){
var thik2=$("#kar3").attr('src');
$("#tele3").attr('src',thik2)
$("#tele3").fadeToggle();
});
$("#kar4").click(function(){
var thik3=$("#kar4").attr('src');
$("#tele4").attr('src',thik3)
$("#tele4").fadeToggle();
});
$("#list").change(function(){
var selectedValue=$(this).val();
$("#h").css("color",selectedValue);
});
$("#fonts").change(function(){
var selecteValue=$(this).val();
$("#h").css("font-size",selecteValue);
});
$('input[type="radio"]').click(function(){
$("#h").css("font-style",$(this).val());
});
$("#img1").click(function(){
$("#button1").click(function(){
var lk=$(this).val();
$(".grid").css("border-Color",lk);
});
$("#button2").click(function(){
var k=$(this).val();
$(".grid").css("border-Color",k);
});
});
$("#grid1").click(function(){
$("#button1").click(function(){
var llk=$(this).val();
$("img").css("border-Color",llk);
});
$("#button2").click(function(){
var kl=$(this).val();
$("img").css("border-Color",kl);
});
});
});
</script>
</head>
<body>
<h3 id="h" >Album tittle</h3>
<div class="container1">
<div class="grid">
<img id="tele1" src="original.jpg"width="45%"height="120px">
<img id="tele2" src="original.jpg"width="45%"height="120px">
<img id="tele3" src="original.jpg"width="45%"height="120px">
<img id="tele4" src="original.jpg"width="45%"height="120px">
</div>
<div class="addimg">
<img id="kar1" src="bike.jpg"width="20.2%"height="100px" >
<img id="kar2" src="purple-curves-circles- 271580.jpg"width="22.4%"height="100px">
<img id="kar3" src="fail.jpg"width="22.2%"height="100px">
<img id="kar4" src="download.jpg"width="22.4%"height="100px">
</div>
</div>
<div class="right1">
<form id="my form">
<input id="img1" type="radio" name="bcolor"value="U">image
<input id="grid1" type="radio" name="bcolor"value="B">grid
</form>
<br>
<button id="button1" value="red"> red</button><br>
<button id="button2" value="yellow" >yellow</button>
<div class="right2">
<P>
Color :
<select id="list">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="#ff00ff">pink</option>
<option value="#ff9900">orange</option>
<option value="#0088cc">light blue</option>
</select>
</p>
font-size:
<select id="fonts">
<option value="1px">1
<option>
<option value="10px">10
<option>
<option value="20px">20
<option>
<option value="30px">30
<option>
<option value="40px">40
<option>
<option value="50px">50
<option>
<option value="60px">60
<option>
</select>
<br><br>
<input id="family1" type="radio" name="k" value="italic">I
<input id="family1" type="radio" name="k" value="normal">N
<input id="family1"type="radio" name="k" value="Courier New">I
</div>
</body>
</html>
Мой код не работает, когда я нажимаю второй переключатель, он также изменяет цвет внешней границы. второе радио должно изменять только цвет только внутренней границы.
Ответ №1:
Вы имеете в виду, что переключатели с идентификаторами #img1 и #grid1 меняют цвет div с помощью class .right1?
Ваш пример не говорит сам за себя. Пожалуйста, уточните.
P.S: переключатели внизу имеют одинаковые идентификаторы, что невозможно. Поскольку каждый элемент должен иметь уникальный идентификатор, вы должны предоставить name атрибуту некоторое общее значение (если это a type=radio ). Вы можете попробовать предоставить class вместо Id этого здесь.
Некоторые наблюдения из кода: если вы пытаетесь изменить цвет некоторых элементов с помощью элементов #img1 и #grid1, как показано ниже:
$("#img1").click(function(){
$("#button1").click(function(){
var lk=$(this).val();
$(".grid").css("border-Color",lk);
});
$("#button2").click(function(){
var k=$(this).val();
$(".grid").css("border-Color",k);
});
});
$("#grid1").click(function(){
$("#button1").click(function(){
var llk=$(this).val();
$("img").css("border-Color",llk);
});
$("#button2").click(function(){
var kl=$(this).val();
$("img").css("border-Color",kl);
});
});
тогда это не будет выполнять никаких действий, потому что предоставление a $("#<button>").click(function(){...}) внутри события щелчка любого элемента не приведет к автоматическому запуску обработчика события щелчка. Вы должны использовать $("#<button>").trigger("click"); вместо этого.
Пожалуйста, внесите изменения, которые я предложил, и, пожалуйста, перепишите свой код и проверьте. В остальном все вроде нормально. 🙂
Надеюсь, это поможет вам. Спасибо.