Javascript中点击事件对应的改变div状态

Posted 2020-11-19 shuaiding

<div class="setted-wrap J_channel_sets">
  <div class="setting-item" id="k1" style="display: none;">
    <div class="fl cfx"><span class="setting-tit fl" title="单选题">单选题</span> <em
      class="fl"><b>0</b>道试题可用</em></div>
    <div class="setting-fun fr"><input type="text" name="question_channel_type[1]" class="warnning"
                                       value="" placeholder="0">道 <i class="del iconw-del2"></i></div>
  </div>
  <div class="setting-item" id="k2" style="display: none;">
    <div class="fl cfx"><span class="setting-tit fl" title="填空题">填空题</span> <em
      class="fl"><b>0</b>道试题可用</em></div>
    <div class="setting-fun fr"><input type="text" name="question_channel_type[4]" class="warnning"
                                       value="" placeholder="0">道 <i class="del iconw-del2"></i></div>
  </div>
  <div class="setting-item" id="k3" style="display: none;">
    <div class="fl cfx"><span class="setting-tit fl" title="计算题">计算题</span> <em
      class="fl"><b>0</b>道试题可用</em></div>
      <div class="setting-fun fr"><input type="text" name="question_channel_type[6]" class="warnning"
                                         value="" placeholder="0">道 <i class="del iconw-del2"></i></div>
    <div class="setting-fun fr"></div>
  </div>

<div class="smart-type-warp">
  <div class="smart-type-set J_channel_btns" id="ding">
      <a href="javascript:;" title="单选题" id="k1">单选题</a>
      <a href="javascript:;" title="填空题" id="k2">填空题</a>
      <a href="javascript:;" title="计算题" id="k3">计算题</a>

//第一步，将选中的题目类型状态成为选中状态
$(document).ready(function () {
    $("#ding a").click(function () {
        $(this).addClass("selected");
//第二步，改变选中的题目类型对应的题目
        var ID = $(this).attr(‘id‘);
        document.getElementById(ID).style.display="block";

    });