Question

我创建了一个模式框。在模式框中有一个蓝色的文本。该文本称为发布，它链接到我的复选框。用户将与文本进行交互，然后乳清他们所做的文本将从蓝色变为红色。文字为红色时，表示该复选框已选中。

现在的问题是我希望在文本发布为红色时显示文本，仅在用户单击“应用”后显示。

当前，我尝试使用.prop，但是整个代码随后崩溃了，没有任何结果可用。

请有人告诉我一个可行的解决方案。

    <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>
     
    <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" > <label for="group1" class="onlyThese">Publication </label> </p>
    
    <div id="myDiv">the preparation and issuing of a book, journal, or piece of music for public sale.</div>
    </div>
    				
    <div>
    <p style="float:right"> 
    <a href="#" rel="modal:close"; class="onlyThese;"> <b>Apply</b> </a> 
    </p>    
    </div>
    
    </div>

        <script>
        
      $('a[href="#ex5"]').click(function(event) {
          event.preventDefault();
          $(this).modal({
            escapeClose: false,
            clickClose: false,
            showClose: false,
          });
        });
    	
    	$('.yourCheckbox').change(function(){
      if($(this).prop("checked")) {
        $('#myDiv').show();
      } else {
        $('#myDiv').hide();
      }
    });
 </script>

预期输出如下：

用户单击名为“扇区”的模式框
然后，用户与名为“ publication”的蓝色文本进行交互
用户单击该文本后，它变成红色，这又选中了该复选框
用户单击将应用于关闭模式框，并且div中包含的信息将显示在屏幕上。

Answer 1

您遇到了一些问题。首先，一个元素只能有一个ID。您需要将复选框的ID从id="group1 yourCheckbox"更改为id="group1"，并使“ yourCheckbox”成为类或其他名称。如果将其设为一类，则需要将JS从$('#yourCheckbox').change更改为$('.yourCheckbox').change。

那应该为您提供一个良好的开端。另外，考虑使用JS添加/删除类，而不要使用旧的.show() / .hide()方法。因为可以使用CSS来完成工作，所以您将对外观有更多的控制。

要使div在模式关闭后留在页面上，则需要在按下“应用”按钮时添加一些代码。您需要触发.on( 'click', function()事件。或考虑在单击该按钮时使用模式的回调功能。

Answer 2

这是您要实现的目标。运行代码片段以查看结果。

    <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>
     
    <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" > <label for="group1" class="onlyThese">Publication </label> </p>
    
    <div id="myDiv">the preparation and issuing of a book, journal, or piece of music for public sale.</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,
          });
        });
    	
    	$('.yourCheckbox').change(function(){
      if($(this).prop("checked")) {
        $('#myDiv').show();
        content = $('#myDiv').html();
      } else {
        $('#myDiv').hide();
        content = "";
      }
    });
$('[rel="modal:close"]').on('click',()=>{
         $('.btn').parent().append(content);
        })
 </script>

模式框关闭后如何在屏幕上显示文本？

2 个答案: