javascript - 如何显示带有点击 ID 的文本

Question

大家好，我想问你们一些事情。

我正在尝试制作一个弹出窗口。我的弹出窗口工作正常。但如果可能的话，任何人都可以告诉我如何在弹出窗口中撤回一些文本。

例如我创建了这个 DEMO .

你可以看到在这个演示中有一个 JohDoe1,JohnDoe2,JohnDoe3 和 JohnDoe4 还有一个 Click to show name in popup 链接。

我想了解如何在单击(单击以在弹出窗口中显示名称) 链接

Javascript

  $(document).ready(function(){
   var i;
    $('.vd_button').click(function(){
      i = $(this).attr('id');
      $('.vduzalani, .box').animate({'opacity':'.50'}, 300, 'linear');
      $('.vvalan').animate({'opacity':'1.00'}, 300, 'linear');
      $('.vduzalani, .vvalan').css('display', 'block');
    });

    $('.vkapat').click(function(){
      close_box();
    });

    $('.vduzalani').click(function(){
      close_box();
    });

  });

  function close_box()
  {
    $('.vduzalani, .vvalan').animate({'opacity':'0'}, 300, 'linear', function(){
      $('.vduzalani, .vvalan').css('display', 'none');
    });
  }

HTML

<div class="vduzalani"></div>
    <div class="vvalan">
      <div class="vkapat">✖</div>
      <div class="bilgidegistirmealani">
        The name should be here
      </div>
    </div>
<div class="container">
  <div class="divcont">
    <div class="name" id="5">Jogn Doe1</div>
    <div class="show_name vd_button" id="5">Click To show name in popup</div>
  </div>
  <div class="divcont">
    <div class="name" id="6">Jogn Doe2</div>
     <div class="show_name vd_button" id="6">Click To show name in popup</div>
  </div>
  <div class="divcont">
    <div class="name" id="7">Jogn Doe3</div>
     <div class="show_name vd_button" id="7">Click To show name in popup</div>
  </div>
  <div class="divcont">
    <div class="name" id="8">Jogn Doe4</div>
     <div class="show_name vd_button" id="8">Click To show name in popup</div>
  </div>
</div>

Answer 1

本质上，将点击事件绑定(bind)到类名为“show_name”的那些div。单击时捕获他们的“prev” sibling 的文本并使用该文本更新对话框的文本。使用 jQuery，这非常简单直接:

$('.show_name').click(function () {
    var text = $(this).prev().text();
    $('.bilgidegistirmealani').text(text);
    //open dialog here
});