javascript - jQuery 没有从 php for 循环中获取正确的值

Question

我在 php 中的 for 循环看起来像这样:

for ($i=1;$i<=10;$i++) {
 ?>
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" />
    <a href="javascript:void(0)" class="VerySmallFont">
          <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div>
    </a>

现在我想将 $i 的值从 php 提取到 Jquery。这是我在 JS 部分为此所做的 -

<script type="text/javascript" language="javascript">
 $(document).ready(function() {
     $(".VerySmallFont").click(function(){
         var $Parent              = $(this).parent();                       
         var ThisQuestionNumber   = $Parent.find('[id^="GetQuestion-]:first').val();  
         var TestID        = $("#GetTestID").val();
         var ShowCQ = '1';
         $.ajax( {
             type : 'GET',
             url:'getquestiondata.php',
             data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber},
             success:function(data) {
                 $("#LoadingImage").hide();
                 $('#ShowQuestion').html(data);
             }
         });
     });
 });
</script>

我没有在我的 JS 中获取 var ThisQuestion 的值。我还尝试使用类 ThisQuestion 而不是 id 选择器 GetQuestion 但这也不起作用。我不确定我犯的错误是什么。

Answer 1

在查看您的标记时，您似乎指向了错误的元素。在您的 jquery 中，您指向父级。您应该指向前一个兄弟，这是隐藏的输入。

var hidden = $(this).prev(); // point the input
var ThisQuestionNumber = hidden.val();

完整:

<?php
for ($i=1;$i<=10;$i++) {
 ?>
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" />
    <a href="javascript:void(0)" class="VerySmallFont">
          <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div>
    </a>
<?php } ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {

    $(".VerySmallFont").click(function(){

        var hidden = $(this).prev();
        var ThisQuestionNumber = hidden.val(); // point to the previous sibling
        var TestID = $("#GetTestID").val();
        var ShowCQ = '1';
        $.ajax({
            type : 'GET',
            url:'getquestiondata.php',
            data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber},
            success:function(data) {
                $("#LoadingImage").hide();
                $('#ShowQuestion').html(data);
            }
        });
    });
});
</script>

Demo