Javascript 绑定(bind)到 Div 标签

Question

我正在动态创建 div 标记。当我点击链接时，我想在里面的灯箱上显示。

我已经编写了如下代码，但是当我单击链接仅显示最后一项时，会出现问题。

$(function () {
  $('td.job a').click(function () {
    $('.job_box').show();
  });
  $('.job_box .close').click(function () {
    $('.job_box').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="click1" href="javascript:void(0)">Click One</a>
<a id="click2" href="javascript:void(1)">Click Two</a>

<div id="click1" class="job_box mem_login_box">
  <div>
    <a href="javascript:void(0)" class="close" title="close">close</a>
    <div class="m_title">Content</div>
  </div>
</div>

<div id="click2" class="job_box mem_login_box">
  <div>
    <a href="javascript:void(0)" class="close" title="close">close</a>
    <div class="m_title">Content</div>

  </div>
</div>

Answer 1

引用此Fiddle

HTML

<a divId="click1" class="open" href="#">Click One</a>
<a divId="click2" class="open" href="#">Click Two</a>

<div id="click1" class="job_box mem_login_box">
    <div>
        <a href="javascript:void(0)" class="close" title="close">close</a>
        <div class="m_title">Content1</div>
    </div>
</div>

<div id="click2" class="job_box mem_login_box">
    <div>
        <a href="javascript:void(0)" class="close" title="close">close</a>
        <div class="m_title">Content2</div>

    </div>
</div>

JS

$(function () {
        $('.open').click(function () {
            var parentDiv = $(this).attr("divId");
            $("#"+ parentDiv + " div").css("display", "block");
        });
        $('.job_box .close').click(function () {
            $(this).parent().hide();
        });
});