javascript - 怎么简写这段jQuery功能？-PHP中文网问答

<!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>

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

<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(); })

<!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>

$(function(){ $.each($("input[name='purpose_id[]']"), function(index) { $(this).click(function(){ if($(this).prop("checked")){ $(".bd").eq(index).show(); }else{ $(".bd").eq(index).hide(); } }) }); })

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

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

全部回复(8)

我想大声告诉你2017-06-26 10:56:41 8楼

赞 +0

添加回复

PHP中文网2017-06-26 10:56:41 7楼

首先给bd的p加上data-v对应上面的value

我想大声告诉你2017-06-26 10:56:41 6楼

typecho2017-06-26 10:56:41 5楼

学习ing2017-06-26 10:56:41 4楼

p加个属性跟复选框能对应，那个通过index来进行判断的写法位置稍微一改动就没用

伊谢尔伦2017-06-26 10:56:41 3楼

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

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

});

習慣沉默2017-06-26 10:56:41 2楼

<input type="checkbox" name="purpose_id[]" class="purpose" onchange="check1();" data="1" value="13">家庭装饰

欧阳克2017-06-26 10:56:41 1楼

你这是要做什么功能啊，没看明白。。。。。。