javascript - 单击div时如何获取div id

Question

   <div id=ControlId>
<span>Select Option</span> 
</div>
  </div>

   <div id=ControlId + "_child"  style="display: none" > 
<table>
    <tr>
        <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1</td>
    </tr>
    <tr>
        <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2</td>
    </tr>
    <tr>
        <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3</td>
    </tr>
</table>
</div>

我在 td 中添加了不止一次，如下图所示

如何在点击事件中实现主 div 的 id ，实际上我的问题是如果我点击第一个 div ，最后添加只打开

$("#" + ControlId).click(function () {
    $("#" + ControlId + "_child").fadeIn("slow");
    $("#" + ControlId + "_child").toggle();
});

这是我的实际事件代码

Answer 1

试试这个 html

    <div id="select1" data="select">
    <span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
    <table>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Bike" />
                option 1
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Car" />
                option 2
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="dog" />
                option 3
            </td>
        </tr>
    </table>
</div>
<div id="select2" data="select">
    <span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
    <table>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Bike" />
                option 1
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Car" />
                option 2
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="dog" />
                option 3
            </td>
        </tr>
    </table>
</div>

javascript

<script type="text/javascript">
    $(document).ready(function () {
        $('[data="select"]').click(function () {
            var selectdiv = $(this);
            $('[toggle]:not([toggle="' + selectdiv.attr('id') + '"])').hide();
            $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
        })
    })
</script>

Answer 2

为什么不

$("#" + ControlId).click(function () {
    $("#" + this.id + "_child").fadeIn("slow");
    $("#" + this.id + "_child").toggle();
});

Answer 3

而不是 id 给 div 类

     <div id="ControlId" class="ControlId">
      <span>Select Option</span> 
      </div>
    </div>


 $(function()
 {

$(".ControlId").click(function()
 {
 var div=$(this);
 //hide or toggle child divs

 });
});