javascript - jQuery函数冲突
问题描述
任务:
- 如果选择了单选按钮 - 显示隐藏的图像和文本,在切换到另一个单选按钮之前不要隐藏。
- 悬停到单选按钮的文本 - 仅显示图片并在鼠标离开后隐藏
使用我的代码,只有悬停的第二个功能有效。当您悬停单选按钮时,图片会出现,但当您选择它时,它就会消失。
单独的功能工作正常。
我该如何解决?
$(document).ready(function() {
$('.img2, .img3, .img4, .img5, .img6, .img7').hide();
$('#pic1').css('opacity', '1');
$('.text').hide();
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'item1') {
$('#pic5, #text1').show();
}
else {
$('#pic5, #text1').hide();
}
if ($(this).attr('id') == 'item2') {
$('#pic3, #text2').show();
$('#pic1').css('opacity', '0.4');
}
else {
$('#pic3, #text2').hide();
}
if ($(this).attr('id') == 'item3') {
$('#pic7, #text3').show();
$('#pic7').css('opacity', '0.4');
}
else {
$('#pic7, #text3').hide();
}
if ($(this).attr('id') == 'item4') {
$('#pic4, #text4').show();
$('#pic1').css('opacity', '0.4');
}
else {
$('#pic4, #text4').hide();
}
if ($(this).attr('id') == 'item5') {
$('#pic5, #text5').show();
$('#pic1').css('opacity', '0.4');
}
else {
$('#text5').hide();
}
if ($(this).attr('id') == 'item6') {
$('#pic6, #text6').show();
$('#pic1').css('opacity', '0.4');
}
else {
$('#text6').hide();
}
if ($(this).attr('id') == 'item7') {
$('#pic7, #text7').show();
$('#pic1').css('opacity', '0.4');
}
else {
$('#text7').hide();
}
});
$("#desc1").mouseenter(function() {
$('#pic5').show();
});
$("#desc1").mouseleave(function() {
$('#pic5').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="image-wrap">
<div class="image">
<div class="img1" id="pic1"><img src="img/main_v3-38.png" alt=""></div>
<div class="img2" id="pic2"><img src="img/main_v3-41.png" alt=""></div>
<div class="img3" id="pic3"><img src="img/main_v3-44.png" alt=""></div>
<div class="img4" id="pic4"><img src="img/main_v3-47.png" alt=""></div>
<div class="img5" id="pic5"><img src="img/main_v3-50.png" alt=""></div>
<div class="img6" id="pic6"><img src="img/main_v3-53.png" alt=""></div>
<div class="img7" id="pic7"><img src="img/main_v3-56.png" alt=""></div>
</div>
</div>
<div class="radio">
<form class="radiobuttons">
<p id="desc1"><input type="radio" name="item1" id="item1" value="1">Варианты монтажа</p>
<p id="desc2"><input type="radio" name="item1" id="item2" value="1">Роллетные профили</p>
<p id="desc3"><input type="radio" name="item1" id="item3" value="1">Концевой профиль</p>
<p id="desc4"><input type="radio" name="item1" id="item4" value="1">Направляющие шины</p>
<p id="desc5"><input type="radio" name="item1" id="item5" value="1">Защитный короб</p>
<p id="desc6"><input type="radio" name="item1" id="item6" value="1">Боковые крышки, консоль</p>
<p id="desc7"><input type="radio" name="item1" id="item7" value="1">Октогональный вал</p>
<p id="desc7"><input type="radio" name="item1" id="item7" value="1">Концевой захват</p>
<p id="desc7"><input type="radio" name="item1" id="item7" value="1">Система управления</p>
</form>
</div>
</div>
<div class="text" id="text1">Lorem Ipsum Text1</div>
<div class="text" id="text2">Lorem Ipsum Text2</div>
<div class="text" id="text3">Lorem Ipsum Text3</div>
<div class="text" id="text4">Lorem Ipsum Text4</div>
<div class="text" id="text5">Lorem Ipsum Text5</div>
<div class="text" id="text6">Lorem Ipsum Text6</div>
解决方案
您是对的,这里存在冲突,但它根据您所拥有的内容正常工作。
$("#desc1").mouseleave(function() {
$('#pic5').hide();
});
不管你有没有点击这个按钮,当鼠标移开时它会隐藏图片。试试这个
$("#desc1").mouseleave(function() {
if($('#item1').prop('checked') === false) {
$('#pic5').hide();
}
});
推荐阅读
- python-3.x - 阻止父级(subprocess.Process)在 Windows 中向子级(multiprocessing.Process)传播信号
- javascript - 在 componentDidUpdate 或 handleSubmit 上使用 Formik setFieldValue(错误:不是函数)
- android - 将语音中的文本与文本视图中的文本进行比较
- javascript - Mongodb 上的小 NLP 请求
- vb.net - 尝试从packet.tf获取OAuth授权时如何解决“错误:(401)未经授权”?
- scala - 将结构传递给 Spark 中的 UDAF
- jquery - 使用 QUnit 测试表单是否提交了两次
- sql - 如何自动杀死活动会话?
- php - 将数组与祖先元素混合
- c++ - 理解 C 链接器错误:多重定义