为什么Isnt js / jquery事件在PHP foreach中工作

时间:2018-12-25 06:12:51

标签: php jquery ajax

我了解foreach,但这对我来说是新的,因为在PHP的foreach中,每个项目都有一些显示的脚本,并且想知道为什么它仅适用于第一个项目

在代码中,我正在从MYSQL数据库获取图像。而不是在js中使用onclick,而是在jquery中学习更多,只有当我单击第一个图像时,它才会生成
$("#main").load("includes/product.php");
路径和更改我想更改,但产品名称和购物车按钮中的外观不会更改。

<section id="new-products" class="clearfix">
  <div class="title-block">
    <h4>New Products</h4>
  </div>
  <?PHP 
    foreach ($item as $items){
  ?>        
  <div class="left-col-block">
    <article class="product-box clearfix">   
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link">
      <img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
    </a>
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link"><?PHP echo $items['name']; ?></a><br>
    <span class="price">$<?php echo $items['price'];?></span>
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $    ['brand'];?>/<?PHP echo $items['name'];?>" id="product-link" class="button tiny right icon-basket"></a>
   </article>
  `<script>
     $( "#product-link" ).click(function() {

     $("#main").load("includes/product.php");
     });
   </script>
 </div> 
 <div class="left-col-block">
 </div>
 <?PHP
 }
 ?>
</section>

预期: 我希望每个具有product-link ID的链接在每个产品和每个ID上提供带有jquery的事件触发器

实际结果: $("#main").load("includes/product.php"); 仅适用于等于product-link的第一个ID

2 个答案:

答案 0 :(得分:0)

因为每个项目有3个喜欢的对象,并且您想为每个3个链接设置点击,所以您必须使用class属性并将其设置为每个项目唯一。

我将您的代码更改为此:

<section id="new-products" class="clearfix">
    <div class="title-block">
        <h4>New Products</h4>
    </div>
    <?PHP
    foreach ($item as $key=>$items){
        ?>
        <div class="left-col-block">
            <article class="product-box clearfix">
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>">
                    <img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
                </a>
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>"><?PHP echo $items['name']; ?></a><br>
                <span class="price">$<?php echo $items['price'];?></span>
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="button tiny right icon-basket product-link-<?=$key?>"></a>
            </article>
            `<script>
                $( ".product-link-<?=$key?>" ).click(function() {

                    $("#main").load("includes/product.php");
                });
            </script>
        </div>
        <div class="left-col-block">
        </div>
        <?PHP
    }
    ?>
</section>

答案 1 :(得分:0)

发现答案是
<script>$( ".product-box a" ).click(function() { $("#main").load("includes/product.php"); });</script>
由于product-bot是一类,我没有意识到#使其检查id和the。使其可以搜索一个类,并且该类可以被多次调用,而ID必须是唯一的