javascript - 怎么簡(jiǎn)寫這段jQuery功能？
問(wèn)題描述
<!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[]' value='13'>家庭裝飾 <input type='checkbox' name='purpose_id[]' value='17'>禮物饋贈(zèng) <p class='bd'>1放家庭裝飾 input</p> <p class='bd'>2放禮物饋贈(zèng) 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>
問(wèn)題解答
回答1：$('.purpose').change(function(){ var index = $(this).index(); if($(this).is(':checked')){$('.bd').eq(index).show(); }else{ $('.bd').eq(index).hide(); }});回答2：
首先給bd的p加上data-v對(duì)應(yīng)上面的value
<p data-v='13'>1放家庭裝飾 input</p><p data-v='17'>2放禮物饋贈(zèng) input</p>$(’.purpose’).on(’click’,function(){ var $bd = $(’p[data-v=’ + $(this).val() + ’]’); if($bd.is(':hidden'))$bd.show(); else$bd.hidden();})回答3：
<!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[]' value='0'>家庭裝飾 <input type='checkbox' name='purpose_id[]' value='1'>禮物饋贈(zèng) <p class='bd'>1放家庭裝飾 input</p> <p class='bd'>2放禮物饋贈(zèng) 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>回答4：
$(function(){ $.each($('input[name=’purpose_id[]’]'), function(index) {$(this).click(function(){ if($(this).prop('checked')){$('.bd').eq(index).show(); }else{$('.bd').eq(index).hide(); }}) });})回答5：
p加個(gè)屬性跟復(fù)選框能對(duì)應(yīng)，那個(gè)通過(guò)index來(lái)進(jìn)行判斷的寫法位置稍微一改動(dòng)就沒(méi)用
<input type='checkbox' name='purpose_id[]' value='13'>家庭裝飾<input type='checkbox' name='purpose_id[]' value='17'>禮物饋贈(zèng)<p id='13'>1放家庭裝飾 input</p><p id='17'>2放禮物饋贈(zèng) input</p><script> $(function () {$(’input[type=checkbox]’).on(’click’, function () { var $p = $('#'+ $(this).val()); $(this).attr('checked') ? $p.show() : $p.hide();}) })</script>回答6：
$('.purpose').on(’change’,function(){
var index = $(this).index(); if($(this).is(':checked')){ $('.bd').eq(index).show(); }else{ $('.bd').eq(index).hide(); }
});
回答7：<input type='checkbox' name='purpose_id[]' onchange='check1();' data='1' value='13'>家庭裝飾
<input type='checkbox' name='purpose_id[]' onchange='check2()' data='2' value='17'>禮物饋贈(zèng)<p class='bd'>1放家庭裝飾 input</p><p class='bd'>2放禮物饋贈(zèng) input</p><script> function check1(){$(’.bd:eq(0)’).toggle(); } function check2(){$(’.bd:eq(1)’).toggle(); }</script>回答8：
你這是要做什么功能啊，沒(méi)看明白。。。。。。
相關(guān)文章：
1. javascript - 微信報(bào)redirect_uri參數(shù)錯(cuò)誤2. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？3. android - 類似微信朋友圈或者QQ空間說(shuō)說(shuō)那種點(diǎn)擊圖片放大，并且有放大縮小手勢(shì)，左右滑動(dòng)圖片手勢(shì)效果4. javascript - 如何計(jì)算字符串寬度？5. 網(wǎng)頁(yè)動(dòng)畫等過(guò)渡效果，CSS3 transitions 和 jQuery animations 誰(shuí)實(shí)現(xiàn)的性能更好？6. angular.js - ng-model如何綁定二選一的單選項(xiàng)框？7. java - Atom中文問(wèn)題8. java - 初學(xué)SSM 在import自己寫的包下的類的時(shí)候飄紅，求大神解答？9. win10系統(tǒng) php安裝swoole擴(kuò)展10. javascript - 有適合開(kāi)發(fā)手機(jī)端Html5網(wǎng)頁(yè)小游戲的前端框架嗎？
網(wǎng)公網(wǎng)安備