Question

任务：

如果选择了单选按钮-显示隐藏的图像和文本，请在切换到另一个单选按钮之前不要隐藏。
将鼠标悬停在单选按钮的文本上-仅显示图片并在鼠标离开后隐藏

使用我的代码，仅悬停的第二个功能起作用。当您将鼠标悬停在单选按钮上时，会出现图片，但是当您选择它时，它只会消失。

单独的功能可以正常工作。

我该如何解决？

$(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>

Answer 1

您是正确的，这里存在冲突，但是它正在根据您所拥有的内容正常工作。

$("#desc1").mouseleave(function() {
    $('#pic5').hide();
});

是否单击此按钮都没有关系，当鼠标移开时它将隐藏图片。试试这个

$("#desc1").mouseleave(function() {
    if($('#item1').prop('checked') === false) {
        $('#pic5').hide();
    }
});

jQuery函数冲突

1 个答案: