Question

我是jquery的新手，它试图使代码从循环中获取id（如果单击）的值并将其附加到新的div。工作正常但是，即使我单击了另一个div，它也只会获得第一个子值。这是我的代码：

<?php
  if($week < 10) {
   $week = '0'. $week;
  }
  for($day= 1; $day <= 7; $day++) {
    $d = strtotime($year ."W". $week . $day);
    $i = 0;
  ?>
  <div id="cal-btn" class="cal-btn">
    <div class="date d-flex justify-center-center">
      <?php echo date('l',$d ); ?>
       <br>
      <?php echo date('d M',$d);  ?>
    </div>
    <input type="hidden" id="cal<?php echo $i; ?> " class="cal" value="<?php echo date('F d, Y',$d);  ?>" />
    </div>
    <?php
    $i++;
    }
    ?>

这是我的jquery：

$(".cal-btn").click(function() {
        $(this).each(function() {
          var cal = $('#cal').val();
          $('.date-sc').append(cal);
        });
    });

有什么办法可以获取单击的div的值并将该值附加到新的div？预先谢谢你们。

Answer 1

您正在使用#cal，它将找到ID为cal的元素。试试这个：

$(".cal-btn").click(function(e) {
    var cal = $(e.target).find('.cal').val();
    $('.date-sc').append(cal);
});

e.target是被单击的div，然后通过使用find('.cal')来搜索该分类为cal的div的所有子级，这是您隐藏的具有所需值的输入。

Answer 2

首先，id必须是唯一的。
您使用的PHP循环会多次创建相同的id。

这是您的代码（使用$week = 40和$year = 2018生成的标记。
（使用console检查您的标记！）

<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Monday<br>
    01 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 01, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Tuesday<br>
    02 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 02, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Wednesday<br>
    03 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 03, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Thursday<br>
    04 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 04, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Friday<br>
    05 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 05, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Saturday<br>
    06 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 06, 2018">
</div>
<div id="cal-btn" class="cal-btn">
  <div class="date d-flex justify-center-center">
    Sunday<br>
    07 Oct
  </div>
  <input type="hidden" id="cal0 " class="cal" value="October 07, 2018">
</div>

试图在输入的$i上使用id来创建唯一的ID ...但是由于$i在每次循环迭代中都设置为0，因此是失败的。 / p>

您应该做的是删除这些ID：

<?php
// For this demo... I had to define those 2 variables.
$week = 40;
$year = 2018;

if($week < 10) {
    $week = '0'. $week;
}
for($day= 1; $day <= 7; $day++) {
    $d = strtotime($year ."W". $week . $day);
?>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        <?php echo date('l',$d ); ?>
        <br>
        <?php echo date('d M',$d);  ?>
    </div>
    <input type="hidden" class="cal" value="<?php echo date('F d, Y',$d);  ?>" />
</div>
<?php
}
?>

在以下工作片段中生成HTML标记：

$(".cal-btn").on("click",function(){
  var inputValue = $(this).find("input").val();
  alert(inputValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Monday<br>
        01 Oct
  </div>
    <input type="hidden" class="cal" value="October 01, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Tuesday<br>
        02 Oct
  </div>
    <input type="hidden" class="cal" value="October 02, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Wednesday<br>
        03 Oct
  </div>
    <input type="hidden" class="cal" value="October 03, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Thursday<br>
        04 Oct
  </div>
    <input type="hidden" class="cal" value="October 04, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Friday<br>
        05 Oct
  </div>
    <input type="hidden" class="cal" value="October 05, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Saturday<br>
        06 Oct
  </div>
    <input type="hidden" class="cal" value="October 06, 2018">
</div>
<div class="cal-btn">
    <div class="date d-flex justify-center-center">
        Sunday<br>
        07 Oct
  </div>
    <input type="hidden" class="cal" value="October 07, 2018">
</div>

关于您的点击处理程序：.each()循环没有用。
$(this)是被单击的元素...显然，只有一个！

但是从$(this)，您可以.find()隐藏的input并获取值。

我只在这里提醒过

jQuery-从循环获取ID的值

2 个答案: