简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Comment abréger cette fonction jQuery?
高洛峰
高洛峰 2017-06-26 10:54:41
0
8
730
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        .bd {display: none;}
    </style>
</head>
<body>
    
    
    <input type="checkbox" name="purpose_id[]" class="purpose" value="13">家庭装饰                                        
    <input type="checkbox" name="purpose_id[]" class="purpose" value="17">礼物馈赠   
    
    <p class="bd">1放家庭装饰 input</p>
    <p class="bd">2放礼物馈赠 input</p>
    
    <script>
        $(function(){
            var onff0 = true;
            var onff1 = true;
           $('.purpose:eq(0):checkbox').on('click',function(){
                if (onff0) {
                    $('.bd:eq(0)').css('display','block');
                } else {
                    $('.bd:eq(0)').css('display','none');
                }
                onff0 = !onff0;
            })
           $('.purpose:eq(1):checkbox').on('click',function(){
                if (onff1) {
                    $('.bd:eq(1)').css('display','block');
                } else {
                    $('.bd:eq(1)').css('display','none');
                }
                onff1 = !onff1;
            })
        })
    </script>
    
    
    
   
</body>
</html>
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

répondre à tous(8)
我想大声告诉你
我想大声告诉你2017-06-26 10:56:41 8 plancher 
$(".purpose").change(function(){
            var index = $(this).index();
            if($(this).is(":checked")){
                $(".bd").eq(index).show();
            }else{
                 $(".bd").eq(index).hide();
            }
});
Comme +0
Ajouter une réponse
洪涛
洪涛2017-06-26 10:56:41 7 plancher

Ajoutez d'abord data-v à p de bd correspondant à la valeur ci-dessus

<p class="bd" data-v="13">1放家庭装饰 input</p>
<p class="bd" data-v="17">2放礼物馈赠 input</p>

$('.purpose').on('click',function(){
    var $bd = $('p[data-v=' + $(this).val() + ']');
    if($bd.is(":hidden"))
        $bd.show();
    else
        $bd.hidden();
})
Comme +0
Ajouter une réponse
我想大声告诉你
我想大声告诉你2017-06-26 10:56:41 6 plancher 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        .bd {display: none;}
    </style>
</head>
<body>
    
    
    <input type="checkbox" name="purpose_id[]" class="purpose" value="0">家庭装饰                                        
    <input type="checkbox" name="purpose_id[]" class="purpose" value="1">礼物馈赠   
    
    <p class="bd">1放家庭装饰 input</p>
    <p class="bd">2放礼物馈赠 input</p>
    
    <script>
        $(function(){
           $('.purpose:checkbox').on('click',function(e){
                   $('.bd:eq(' + e.target.value + ')').css('display', e.target.checked ? 'block' : 'none');
            })
        })
    </script>
</body>
</html>
Comme +0
Ajouter une réponse
typecho
typecho2017-06-26 10:56:41 5 plancher 
$(function(){
   $.each($("input[name='purpose_id[]']"), function(index) {
        $(this).click(function(){
            if($(this).prop("checked")){
                $(".bd").eq(index).show();
            }else{
                $(".bd").eq(index).hide();
            }
        })
   });
})
Comme +0
Ajouter une réponse
学习ing
学习ing2017-06-26 10:56:41 4 plancher

p L'ajout d'un attribut peut correspondre à la case à cocher. La méthode d'écriture du jugement par index sera inutile si la position est légèrement modifiée

. 
<input type="checkbox" name="purpose_id[]" class="purpose" value="13">家庭装饰
<input type="checkbox" name="purpose_id[]" class="purpose" value="17">礼物馈赠

<p class="bd" id="13">1放家庭装饰 input</p>
<p class="bd" id="17">2放礼物馈赠 input</p>

<script>
    $(function () {
        $('input[type=checkbox]').on('click', function () {
            var $p = $("#"+ $(this).val());
            $(this).attr("checked") ? $p.show() : $p.hide();
        })
    })
</script>
Comme +0
Ajouter une réponse
伊谢尔伦
伊谢尔伦2017-06-26 10:56:41 3 plancher

$(".Purpose").on('change',function(){

 var index = $(this).index();
  if($(this).is(":checked")){
      $(".bd").eq(index).show();
  }else{
      $(".bd").eq(index).hide();
  }

});

Comme +0
Ajouter une réponse
習慣沉默
習慣沉默2017-06-26 10:56:41 2 plancher

<input type="checkbox" name="Purpose_id[]" class="Purpose" onchange="check1();" data="1" value="13">Décoration de la maison

<input type="checkbox" name="purpose_id[]" class="purpose" onchange="check2()" data="2" value="17">礼物馈赠

<p class="bd">1放家庭装饰 input</p>
<p class="bd">2放礼物馈赠 input</p>
<script>
    function check1(){
        $('.bd:eq(0)').toggle();
    }

    function check2(){
        $('.bd:eq(1)').toggle();
    }
</script>
Comme +0
Ajouter une réponse
学霸
学霸2017-06-26 10:56:41 1 plancher

Quelle fonction essayez-vous d'utiliser ? Je ne comprends pas. . . . . .

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！