モーダルボックスを作成しました。私のモーダルボックス内には、出版物と食品という名前のサブカテゴリがあります。各サブカテゴリは、クリックすると色が変わるチェックボックスにリンクされています。また、チェックボックスをオンまたはオフにします。また、モーダルボックスを閉じた後、div内のテキストをページにロードできるようにするコードを追加しました。
モーダルボックスを閉じた後、div内の情報をページにロードできるように、チェックされたカテゴリのみを含めることができるようにしたいです。
基本的に、ユーザーがパブリケーションをクリックして赤くすることでチェックすることを選択した場合、モーダルボックスを閉じた後、そのdivのみをページに表示する必要があります。（他のカテゴリの場合はその逆）
ただし、ユーザーが両方のサブカテゴリをチェックした場合は、モーダルボックスを閉じた後、divからの両方の情報をページに表示したいと思います。
サブカテゴリとdivの両方に新しい一意のIDを作成しようとしましたが、何らかの理由で個別に扱われていません。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<style>
.onlyThese{
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label { color:blue }
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
}
input:focus{
outline: none;
}
</style>
<body>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5"; class="modal"; style="background-color:white">
<div style="float:left;">
<p> <input type="checkbox" id="group1" class="yourCheckbox" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv"> blastoise </div>
<p> <input type="checkbox" id="group2" class="yourCheckboxx" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close"; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
<script>
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function(){
if($(this).prop("checked")) {
$('#myDiv, #myDivs').show();
content = $('#myDiv, #myDivs').html();
} else {
$('#myDiv, #myDivs').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
</body>
</html>コードは次のことを実現できるはずです。
data属性を使用して、から値を取得することにより、同じイベントを持つ要素を区別できます。$.data次のことを考慮してください。
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).show();
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).hide();
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
}).onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
</body>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加