Javascript 更改jQuery函数显示和悬停_Javascript_Jquery_Html

Javascript 更改jQuery函数显示和悬停

javascript jquery html

Javascript 更改jQuery函数显示和悬停,javascript,jquery,html,Javascript,Jquery,Html,对不起，这个问题很假，但我自己找不到解决办法，因为我才刚刚开始学习JS 我有两个功能，工作得很好，但我需要做一些改变。我应该怎么做才能做到这一点：当我选择单选按钮“文本1”或悬停时，所有图片都会显示，当另一个单选按钮悬停时，它们不会消失当我选择单选按钮“文本2”或“文本3”时-其工作原理与现在相同-仅显示一张图片，其他图片显示在悬停状态代码： $（文档）.ready（函数（）{ $（'.desc'）。悬停( 函数（）{ var$pic=$（'#'+$（this.data（'picid'

对不起，这个问题很假，但我自己找不到解决办法，因为我才刚刚开始学习JS

我有两个功能，工作得很好，但我需要做一些改变。我应该怎么做才能做到这一点：

当我选择单选按钮“文本1”或悬停时，所有图片都会显示，当另一个单选按钮悬停时，它们不会消失

当我选择单选按钮“文本2”或“文本3”时-其工作原理与现在相同-仅显示一张图片，其他图片显示在悬停状态

代码：

$（文档）.ready（函数（）{
$（'.desc'）。悬停(
函数（）{
var$pic=$（'#'+$（this.data（'picid'））；
console.log（$（this.children（'input'））
if（！$（this）.children（'input'）.prop（'checked'））{
$pic.show（）；
$（'pic1'）.css（'opacity'，'0.4'）；
}
},
函数（）{
var$pic=$（'#'+$（this.data（'picid'））；
if（！$（this）.children（'input'）.prop（'checked'））{
$pic.hide（）；
$（'pic1'）.css（'opacity'，'1.0'）；
}
}
);
$（'input[type=“radio”]”）。更改（函数（）{
$（'.hide，.img'）.hide（）；
var$pic=$（'#'+$（this.data（'picid'））；
var$text=$（'#'+$（this.data（'textid'））；
if（$（this.prop（'checked'））{
$pic.show（）；
$text.show（）；
$（'pic1'）.css（'opacity'，'0.4'）；
}否则{
$pic.hide（）；
$text.hide（）；
$（'pic1'）.css（'opacity'，'1.0'）；
}
});
});

文本1
文本2
文本3
如果我理解你的问题，代码将是这样的
$(document).ready(function() {
    var $text_1_checked=false;

        $('.desc').hover(
            function() {
                    if($text_1_checked){
                    return;
                }
                var $pic = $('#' + $(this).data('picid'));
                console.log($(this).children('input'))
                if (!$(this).children('input').prop('checked')) {
                    $pic.show();
                    $('#pic1').css('opacity', '0.4');
                }
            },
            function() {
                    if($text_1_checked){
                    return;
                }
                var $pic = $('#' + $(this).data('picid'));
                if (!$(this).children('input').prop('checked')) {
                    $pic.hide();
                    $('#pic1').css('opacity', '1.0');
                }
            }
        );


        $('input[type="radio"]').change(function() {
            $('.hide, .img').hide();
            var $pic = $('#' + $(this).data('picid'));
            var $text = $('#' + $(this).data('textid'));
            if ($(this).prop('checked')&&$(this).prop('value')=="1") {
                $('.img').show();
                $text_1_checked=true;
                $('#pic1').css('opacity', '1.0');
                return ;



            }else{

             $text_1_checked=false;


            }
            if ($(this).prop('checked')) {
                $pic.show();
                $text.show();
                $('#pic1').css('opacity', '0.4');
            }

            else {
                $pic.hide();
                $text.hide();
                $('#pic1').css('opacity', '1.0');
            }
        });

    });

我添加了一个标志，以了解是否已检查第一台收音机
如果符合您的目的，请尝试下面的代码
$(document).ready(function () {
        $('input[type="radio"]').click(function () {
            var temp = $(this).val();                
                $('img').each(function () {
                    if ($(this).attr('caption').toLocaleLowerCase() == 
                temp.toLocaleLowerCase()) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                    }
                });                
        });

    });

<body>
<input type="radio" name="r1" value="Text 1" />Text1
<input type="radio" name="r1" value="Text 2" />Text2
<input type="radio" name="r1" value="Text 3" />Text3
<img src="text1.PNG" caption="Text 1" style="display:none"/><img src="text2.PNG"  caption="Text 2" style="display:none"/><img src="text3.PNG"  caption="Text 3" style="display:none"/>

$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。单击（函数（）{
var temp=$（this.val（）；
$（'img'）。每个（函数（）{
if（$（this）.attr（'caption'）.toLocaleLowerCase（）=
temp.toLocaleLowerCase（））{
$（this.show（）；
}
否则{
$（this.hide（）；
}
});                
});
});
文本1
文本2
文本3

@MohammadShrateh谢谢你！它起作用了！如果“文本1”-悬停-所有图片也会显示，比如如果选择了“文本1”-是否可能？是的，您只需要添加if-else语句，就像在change事件中一样，并删除第一个条件