如何通过单击id显示一些文本

Question

大家好，我想问你一件事。

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

例如，我创建了 DEMO 。

您可以在此演示中看到 JohDoe1，JohnDoe2，JohnDoe3 和 JohnDoe4 ，还有一个点击以在弹出窗口中显示名称链接。

我想知道如何点击（点击以在弹出窗口中显示名称<点击该名称​​ JohDoe1，JohnDoe2，JohnDoe3 和 JohnDoe4 ） / em>）链接

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

基本上，将click事件绑定到类名为“show_name”的div。单击时，抓住他们的“prev”兄弟文本，并使用该文本更新对话框的文本。使用jQuery，这非常简单直接：

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

Answer 2

以下是一个示例解决方案：

$('.show_name').on('click', function() {
  var text = $(this).siblings('.name').html()
  alert(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>