php - 多组 html 复选框的相同 Javascript

标签 php javascript html join checkbox

我有一个 javascript 代码，用于一组用于过滤网站中显示的产品的复选框。

现在，我想添加一组新的复选框。原始设置按颜色过滤，这个新设置将按价格过滤。

我的问题是关于 javascript 部分。有什么方法可以使两组复选框的排序通用吗？或者我应该为第二个过滤器创建一个新的 javascript 等等，为我想添加的任何新的排序过滤器创建一个新的 javascript？

请看下面的代码。

谢谢!

<script type="text/javascript">
//http://jsbin.com/ujuse/1/edit
$(function() {
    $("input[type='checkbox']").on('change', function() {
        var colors = [];
        $("input[type='checkbox']:checked").each(function() {
            colors.push(this.value);
        });
        if (colors.length) {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
            $(".indexMain").fadeIn('slow');
            $(".loadingItems").fadeOut(300);
            });

        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
            $(".indexMain").fadeIn('slow');
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

</script>

第一个排序集:

<div class="bgFilterTitles">
    <h1 class="filterTitles">COLOR</h1>
</div>
<div class="colors">
<?php
include ("connection.php");
$colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
$colors ->execute();
while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='color[]' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
</div>

第二组排序

<div class="bgFilterTitles">
    <h1 class="filterTitles">PRICE</h1>
</div>
<div class="colors">
<?php
include ("connection.php");
$prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
$prices ->execute();
while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='price[]' value='".$priceSort[price]."' /><font class='similarItemsText'>   ".$priceSort[price]."</font><br />";
}
?>
</div>
</div>

------------ 应用答案后:

    <script type="text/javascript">
//http://jsbin.com/ujuse/1/edit
$(function() {
    $("input[type='checkbox']").on('change', function() {
        var boxes = [];
        // You could save a little time and space by doing this:
        var name = this.name;
        // critical change on next line
        $("input[type='checkbox'][name='"+this.name+"']:checked").each(function() {
            boxes.push(this.value);
        });
        if (boxes.length) {
            $(".loadingItems").fadeIn(300);
            // Change the name here as well
            $(".indexMain").load('indexMain.php?'+this.name+'=' + boxes.join("+"),
            function() {
                $(".indexMain").fadeIn('slow');
                $(".loadingItems").fadeOut(300);
            });

        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".indexMain").fadeIn('slow');
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});
</script>


<?php
function echoCheckboxSet($header, $divClass, $columnName, $setName) {

    include ("connection.php");
$checkboxes = $con -> prepare("SELECT DISTINCT $columnName FROM item_descr ORDER BY $columnName ASC");
$checkboxes->execute();
?>
<div class="bgFilterTitles">
    <h1 class="filterTitles"><?php echo $header;?></h1>
</div>
<div class="<?php echo $divClass; ?>">
<?php
    while ($box = $checkboxes->fetch(PDO::FETCH_ASSOC)):
    $boxColumnName = str_replace('_',' ',$box[$columnName]);
?>
        <input type='checkbox' class='regularCheckbox' name='<?php echo $setName; ?>' value='<?php echo $box[$columnName]; ?>' />
        <font class='similarItemsText'><?php echo $boxColumnName; ?></font>
        <br />
<?php
endwhile;
?>
</div>
<?php
} // end of echoCheckboxSet

// Call our method twice, once for colors and once for prices
echoCheckBoxSet("COLOR", "colors", "color_base1", "color[]");
echoCheckBoxSet("PRICE", "prices", "price", "price[]");
?>

我看到了复选框并点击了它们，但没有任何反应。

我的 indexMain.php 像这样检索值:

$colors = $_GET['color[]'];
echo "TEST".$colors[1];
            $colors = explode(' ', $colors);
            $parameters = join(', ', array_fill(0, count($colors), '?'));
            $items = $con -> prepare("SELECT * FROM item_descr WHERE color_base1 IN ({$parameters})");
            $items ->execute($colors);
            $count = $items -> rowCount();

我做错了什么？？？

谢谢!

最佳答案

jQuery .change()函数可以传递一个 eventObject 参数，该参数上有一堆关于事件的数据。更重要的是，在.change里面函数，局部变量this设置为触发事件的项目。所以你应该能够做这样的事情:

$(function() {
    $("input[type='checkbox']").on('change', function() {
        var boxes = [];
        // You could save a little time and space by doing this:
        var name = this.name;
        // critical change on next line
        $("input[type='checkbox'][name='"+this.name+"']:checked").each(function() {
            boxes.push(this.value);
        });
        if (boxes.length) {
            $(".loadingItems").fadeIn(300);
            // Change the name here as well
            $(".indexMain").load('indexMain.php?'+this.name+'=' + boxes.join("+"),
            function() {
                $(".indexMain").fadeIn('slow');
                $(".loadingItems").fadeOut(300);
            });

        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".indexMain").fadeIn('slow');
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

因此，您的更改功能现在仅将与更改的名称同名的复选框输入聚合在一起。看起来这与您的标记兼容。我假设你的 indexMain.php加载程序脚本对价格和颜色的作用相同。您可能需要去掉名称末尾的方括号 ( [] ) 才能正确执行操作。如果您的行为需要在颜色和价格之间有显着差异，您始终可以只对名称运行一个开关。

编辑:在这里尝试以类似的方式整合您的 php 代码(我认为这就是您要求的)，这是我会尝试的。

<?php
function echoCheckboxSet($header, $divClass, $columnName, $setName) {

    include ("connection.php");
    $checkboxes = $con -> prepare("SELECT DISTINCT $columnName FROM item_descr ORDER BY $columnName ASC");
$checkboxes->execute();
?>
<div class="bgFilterTitles">
    <h1 class="filterTitles"><?php echo $header;?></h1>
</div>
<div class="<?php echo $divClass; ?>">
<?php
    while ($box = $colors->fetch(PDO::FETCH_ASSOC)):
?>
        <input type='checkbox' class='regularCheckbox' name='<?php echo $setName'?>' value='<?php echo $box[$columnName]; ?>' />
        <font class='similarItemsText'><?php echo $box[$columnName]; ?></font>
        <br />
<?php
endwhile;
?>
</div>
<?php
} // end of echoCheckboxSet

// Call our method twice, once for colors and once for prices
echoCheckBoxSet("COLOR", "colors", "color_base1", "color[]");
echoCheckBoxSet("PRICE", "prices", "price", "price[]");
?>

一些额外的要点:

  • 看起来你有备用的</div>在你的第一个例子中。我删除了它。
  • 在每个脚本中多次包含一个连接文件是不常见的，从一个函数中包含它就更不常见了。我不知道它在做什么，所以我根本没有重构它；看起来它负责创建和/或修改名为 $con 的变量，这不是我最喜欢的连接数据库的方式。
  • while (expr):至 endwhile; syntax这正是我在将标记与控制结构混合时喜欢使用的。如果愿意，您仍然可以使用大括号来包含标记本身。
  • 你真的应该考虑取消 <font>标签。从 html 4.0 开始，它已被弃用。参见 html 4 spec, section 15.2.2 .改用 <span>或 <label>用for attribute并为每个生成的复选框输入添加一个 ID。

关于php - 多组 html 复选框的相同 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13882886/

上一篇：php - 如何包含文件以便项目在多个开发环境中工作

下一篇：php - 网络爬虫脚本不适用于日历事件

相关文章：

javascript - 如何在输入文本密码上贴上标签以避免这些子弹？

php - 使用选择框上的值作为输入保存到sql表中

php - 在表格中显示为长文本，如果为真，则为表格的一行着色

php - 我想插入到一个表中，从 php 中同一数据库中的另一个表获取的数据

javascript - 获取跨度内文本的值

html - 为什么带有 srcset 的 img 请求超过 1 个版本的图像

php number_format 显示小数

javascript - 裁剪缩小图像

javascript - 单独文件中的空对象

javascript - 如何将 html div 附加到表以响应 jQuery getJSON

©2024 IT工具网  联系我们