Web サイトに表示される製品をフィルタリングするために使用される一連のチェックボックスに使用される JavaScript コードがあります。
ここで、新しいチェックボックスのセットを追加したいと思います。元のセットは色でフィルタリングされますが、この新しいセットは価格でフィルタリングされます。
私の質問は、javascript の部分に関するものです。チェックボックスの両方の並べ替えセットで共通にする方法はありますか? または、この 2 番目のフィルター用に新しい 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>
2次仕分けセット
<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();
私は何を間違っていますか???
ありがとう！