[英]How can I load a text separately using my modal box?
我創建了一個模態框。 在我的模態框中，有名為出版物和食品的子類別。 每個子類別都鏈接到一個復選框，單擊時會改變顏色； 它還檢查和取消選中復選框。 我還添加了代碼，允許在模式框關閉后將 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>
如何僅使用JavaScript找出屏幕上模式對話框的寬度和高度？
[英]How can I find out the width and height of a modal dialog box on my screen using just javascript?
如何使用 Jquery 使我的文本框僅包含數字和（逗號）以及空格和 + 字符？
[英]How Can I make it possible that my Text box will take only numbers and ,(coma) and spaace and + characters using Jquery?
如何使用 JavaScript 為我的計算器項目創建一個可以添加文本的框？
[英]How to create a box where I can add text using JavaScript for my calculator project?
如何使用js或jquery將復選框數據放入html的文本區域框中？
[英]How can I get my checkbox data into text area box in html using js or jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.