У меня есть одна страница с именем test.php , которая отображает 2 типа товаров, первый тип - Нечетный , второй тип - Четный , страница имеет однуПереключатель / переключатель HTML
Примечание ( код работает нормально, и он отображает результаты в соответствии со значением переключателя / переключателя )
У меня 1 проблема
Код работает нормально, но он дублирует переключатель / тумблер (см. Изображения ниже)
.
test.php
<?php
require ('../../common.php');
echo "
<html>
<head>
<link rel='stylesheet' href='css/toggleOddEven.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
для загрузки нечетных продуктов по умолчанию при загрузке страницы
<script type='text/javascript'>
$(window).load(function() {
$.ajax({
type:'POST',
url:'test.php',
data:{
product_type:'odd'
},
success: function(data){
$('#view').html(data);
}
});
});
</script>
Значение переключателя / переключателя
<script type='text/javascript'>
$(function(){
$('#myonoffswitch').click(function() {
if ($('#myonoffswitch').prop('checked')) {
$.ajax({
type:'POST',
url:'test.php',
data:{
product_type:'even'
},
success: function(data){
$('#view').html(data);
}
});
}else{
$.ajax({
type:'POST',
url:'test.php',
data:{
product_type:'odd'
},
success: function(data){
$('#view').html(data);
}
});
}
});
});
</script>
Код остальной части страницы
</head>
<body>
<div class='onoffswitch'>
<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch'>
<label class='onoffswitch-label' for='myonoffswitch'>
<span class='onoffswitch-inner'></span>
<span class='onoffswitch-switch'></span>
</label>
</div>
<div id='view'></div>
</body>
</html>
";
if (isset($_POST['product_type'])) {
$product_type = $_POST['product_type'];
$allProducts="SELECT * FROM products_tbl
WHERE product_type = :product_type ";
$stmt = $db->prepare($allProducts);
$query_params = array(
':product_type' => $product_type
);
$stmt->execute($query_params);
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($data as $value):
echo "
<strong># </strong> <a href='prod?id=".$value['product_name']."'>".$value['product_name']."</a> </br>
";
endforeach;
}
?>
почему он дублирует тег?см. изображение ниже
нечетный продукт (значение по умолчанию)
четный продукт