gpt4 book ai didi

javascript - jQuery 显示和隐藏动态类不起作用

转载 作者:行者123 更新时间:2023-12-03 11:47:35 25 4
gpt4 key购买 nike

我试图用 select 元素隐藏和显示页面上显示的 div,但是遇到了一些麻烦,因为我似乎无法让 jQuery 运行。

我正在使用 PHP 列出 SQL 表的结果,该表当前将每一行显示到我的页面上并将它们打印到列表中。

我想让 jQuery 隐藏没有与所选选择选项匹配的类的 div。

下面是一个列表模板示例,它回显所有 MySQL 结果并将它们显示到模板中,然后循环显示表中的每一行:

<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3></a>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>

将“Make”添加到列表容器 div 中,以添加一个能够使用 jQuery 过滤结果的类。

这是我正在使用的带有选择元素的表单:

<form>
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option>'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</form>

正如您所看到的,选择选项包含“Make”并且是循环的。

所以到了 jQuery:

<script>//Wait for DOM to load
(function() {
$(“.select-box”).change( function() {

// get the value of the select element
var make = $(this).val();


//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});</script>

所以理论上这应该可行,但由于某种原因却行不通,有人能注意到任何可能错误的地方吗?

我已将脚本放在页脚中核心 jQuery 的下方,但它仍然不起作用。

这是一个实例:http://www.drivencarsales.co.uk/used-cars.php

最佳答案

看起来您在该页面的源代码中使用了错误的引号,请尝试将其替换为 "

//Wait for DOM to load
$(function() {
$(".select-box").change( function() {

// get the value of the select element
var make = $(this).val();


//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(".listing-container").not("." + make).hide().next().hide();
});
});

编辑您还需要在函数之前添加 $

关于javascript - jQuery 显示和隐藏动态类不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25983377/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com