时间戳

首页 > 解决方案 > 如何从 jQuery 中的同名 div 中获取当前选定的 div 元素？

javascript - 如何从 jQuery 中的同名 div 中获取当前选定的 div 元素？

问题描述

任何人都可以帮助我使用 jQuery 从同一个 div 定位所选项目吗？

这是我在codeigniter中的观点：

<?php 

 foreach($operator as $Operator) {
 ?>
 <div id="default">
                <div class="col-xl-12 col-md-12 mb-4">
                  <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" id="countryName"><?=@$Operator->country?></div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname"><?=@$Operator->longName?></div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://imagerepo.ding.com/logo/<?=strtoupper(substr(@$Operator->providerCode,0,2))?>.png"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden" name="countryIso" value="<?=$Operator->countryIso?>">
</div>
    <?php }?>

上面的 div 创建不同的卡片我希望当我点击卡片时它会显示点击卡片的内容

但我尝试在它下面选择第一个元素而不是其他元素

jQuery代码：

$("#default").click(function(event){

    alert($(this,"#operatorname").text())

})

标签： javascriptjquerycodeignitercodeigniter-3

解决方案

根据您的代码，html 中会有多个相同的 id，这是一种不好的做法。

考虑按如下方式更正您的代码：

 <?php  foreach($operator as $index => $Operator):?>
 <div id="default<?= '_' . $index ?>" class="operator-card">
                <div class="col-xl-12 col-md-12 mb-4">
                  <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName"><?=@$Operator->country?></div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" class="operatorname"><?=@$Operator->longName?></div>
                        </div>
                        <div class="col-auto" class="operatorImage">
                            <img src="https://imagerepo.ding.com/logo/<?=strtoupper(substr(@$Operator->providerCode,0,2))?>.png"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="hidden" name="countryIso" value="<?=$Operator->countryIso?>">
</div>
    <?php endforeach; ?>

然后在javascript中：


$(document).ready(function() {
    $(".operator-card").on('click', function() {
        alert($(this).find('.operatorname').text());
    })
})

推荐阅读