Question

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

我已经编写了类似下面的代码，但是当我点击链接只显示最后一项时会出现问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

有很多错误...请尝试以下代码并告诉我它是否适合您：

<script>
    $(function () {
        $('.job a').click(function () {
        var id = $(this).attr('id');
            $("#"+id+"-div").show();
        });
        $('.job_box .close').click(function () {
            $(this).parent().parent().hide();
        });
    });
</script>
<div class="job">
<a id="click1" href="javascript:void(0)">Click One</a>
<a id="click2" href="javascript:void(1)">Click Two</a>
</div>
<div id="click1-div" 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><div id="click2-div" 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>

Javascript绑定到Div标签

2 个答案: