javascript - 输入变量可见，但在 Ajax 、 $each 和 Div 克隆过程之后不可访问

Question

我被带到城镇广场，因为我的示例代码中的错误而在我最后一次发布关于此的帖子时被扔石头......哈哈。这是由于强调这一点。最后我不得不删除它。感谢各位大佬的指点，帮助像我这样的新手学习。现在我从中吸取了教训，并在代码运行中呈现了这一切。

我的问题是 注册到期日期可见，但是当我单击测试日期输入按钮时，它显示为空。我创建了一个复制问题的代码运行/片段。

**Important.** 
Please remember to disable  the variable carDetailCloned.find('.mydate').val(person.registration); 
using // before enabling the test variables.

 

card-container是在 div/card 被克隆之后。我将相同的 mydate 变量或相同变量的相同变体之一放在下面进行测试。

$('.card-container').append(carDetailCloned);

以下变化的结果：

 Data visible but Blank Alert so no difference.
//carDetailCloned.find('.mydate').val(person.registration); 

Data visible,data found as it Alerts the visible data!, But the same date shows on all fields.
//$('.card').find('.mydate').val(person.registration);

最终游戏 我需要在另一个脚本中使用该值，但我无法选择它。

$(document).ready(function(){



 //simulates jason data result from Ajax
  var data = [
 
   {id:31,name:"Mike",surname:"Rynes",registration:1980},
   {id:32,name:"James",surname:"Bond",registration:2000},
   {id:33,name:"Helen",surname:"Wright",registration:1978},
  
  ];
  

     $.each(data, function( i, person ) {
    
    
      var carDetailCloned = $('.card').first().clone().show();
      
      carDetailCloned.find('.id').text(person.id);
      carDetailCloned.find('.name').text(person.name);
      carDetailCloned.find('.surname').text(person.surname);

      carDetailCloned.find('.mydate').val(person.registration);
      
      
      
      $('.card-container').append(carDetailCloned);
      
 //Remove Slashes below to test variations. One at a time please and make sure you disable the one above the card container first thanks.
      
       //carDetailCloned.find('.mydate').val(person.registration); 
       //$('.card').find('.mydate').val(person.registration);
       //$("#"+id).find('.mydate').val(person.registration);
    
  });
});








$(document).ready(function(){
$(document).on('click', '.card .test-btn', function(event){
var mydate = $('.card').find('.mydate').val();
alert(mydate);

});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">




<div class="album py-1">
  <div class="container bg-light">
    <div class="row py-2">
      <div class="col-md-3 card-container" >
        <div class="card mb-3 shadow-sm"  style="display:none;">
          <div class="hover-container">
         </div>
          <div class="card-body CarDetail">
           <p class="card-text font-weight-bold">ID:
                 <span class="id"></span>
            </p>
            <p class="card-text font-weight-bold">Name:
                   <span class="name"></span>
            </p>
            <p class="card-text font-weight-bold">Surname:  
                <span class=" surname"></span>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <p class="font-weight-bold ">Registration: 
                 <span class="font-weight-plain"></span>
                <span class="registration"></span> <span>Expires:
                
        <input  type="text" class="mydate" name="" value=""> </span> 
              </p>   
           
         
          </div>
            <p><button class="test-btn" >Test mydate input</button> </p>
           </div>
          </div>
        </div>   
    </div>
  </div>

</div>

标签： javascriptjquery

Answer 1

您可以使用.closest()获取最近的卡片 div，然后单击按钮.find()来查找您的输入并显示相同的内容。

演示代码：

$(document).ready(function() {
 //simulates jason data result from Ajax
  var data = [

    {
      id: 31,
      name: "Mike",
      surname: "Rynes",
      registration: 1980
    },
    {
      id: 32,
      name: "James",
      surname: "Bond",
      registration: 2000
    },
    {
      id: 33,
      name: "Helen",
      surname: "Wright",
      registration: 1978
    },

  ];


  $.each(data, function(i, person) {


    var carDetailCloned = $('.card').first().clone().show();

    carDetailCloned.find('.id').text(person.id);
    carDetailCloned.find('.name').text(person.name);
    carDetailCloned.find('.surname').text(person.surname);
    carDetailCloned.find('.mydate').val(person.registration);
    $('.card-container').append(carDetailCloned);

  });
});

$(document).ready(function() {
  $(document).on('click', '.card .test-btn', function(event) {
  //use closest and find
    var mydate = $(this).closest('.card').find('.mydate').val();
    alert(mydate);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">




<div class="album py-1">
  <div class="container bg-light">
    <div class="row py-2">
      <div class="col-md-3 card-container">
        <div class="card mb-3 shadow-sm" style="display:none;">
          <div class="hover-container">
          </div>
          <div class="card-body CarDetail">
            <p class="card-text font-weight-bold">ID:
              <span class="id"></span>
            </p>
            <p class="card-text font-weight-bold">Name:
              <span class="name"></span>
            </p>
            <p class="card-text font-weight-bold">Surname:
              <span class=" surname"></span>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <p class="font-weight-bold ">Registration:
                <span class="font-weight-plain"></span>
                <span class="registration"></span> <span>Expires:
                
        <input  type="text" class="mydate" name="" value=""> </span>
              </p>


            </div>
            <p><button class="test-btn">Test mydate input</button> </p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>