Div onclick对话框由于某种原因打开不起作用

时间：2017-09-05 11:13:00

标签： php jquery html

看起来像这样：Image

我对JQuery很新，我试图联系其他人，但他们并不知道为什么它没有用。

我真的遇到了这个问题，我希望stackoverflow上有人知道这个问题。如果需要添加更多代码，请发送评论，我会添加它。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <title>Maasduinen</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <link rel="javascript" href="script.js">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

									<div id="dialog-1">

									TEST
									</div>

									

													<div id="dialog-2">

									Naam Bed & Breakfast
									</div>

									

													<div id="dialog-3">

									Testing
									</div>

									

													<div id="dialog-4">

									Naam Bed & Breakfast
									</div>

									

													<div id="dialog-5">

									Naam Bed & Breakfast
									</div>

									

													<div id="dialog-6">

									hoi
									</div>

									

													<div id="dialog-7">

									Testing
									</div>

									

													<div id="dialog-8">

									nog test
									</div>

									

													<div id="dialog-9">

									Naam Bed & Breakfast
									</div>

									

				

</div>

<div class="maasduin-container">
	<div class="row">
	  <input type="checkbox"  id="spoiler" /> 
 	  <label for="spoiler" >Appartementen</label>
 	  <div class="spoiler">
								
								<div class="products-1">
								<div onclick="$('#dialog-1').dialog('open')"></div>
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																			</div>
									<div class="maasduin-naam">TEST</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon">T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>   				
								</div>

						
												
												
												
												
												
												
												
								<div class="products-8">
								<div onclick="$('#dialog-8').dialog('open')"></div>
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																					<div class="maasduin-actiefoto">
												<img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\maasduinpas.png">
											</div>
																			</div>
									<div class="maasduin-naam">nog test</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>   				
								</div>

						
												
								
						<input type="checkbox"  id="spoiler" /> 
			</div>
		</div>


	  <div class="row">
	  <input type="checkbox"  id="spoiler2" /> 
 	  <label for="spoiler2" >Bed and Breakfast</label>
 	  <div class="spoiler">
								
												
												
												
												
												
												
												
																				<div class="products">
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																			</div>
									<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>					
							</div>
						
								
						<input type="checkbox"  id="spoiler2" />
		</div> 
		</div>

	  <div class="row">		
	  <input type="checkbox"  id="spoiler3" /> 
 	  <label for="spoiler3" >Bungalow en Chalets</label>
 	  <div class="spoiler">
						
												
												
												
												
												
												
												
												
								
						<input type="checkbox"  id="spoiler" />
					</div> 
					</div>


					<div class="row">
	  <input type="checkbox"  id="spoiler4" /> 
 	  <label for="spoiler4" >Camping</label>
 	  <div class="spoiler">
						
												
												
																				<div class="products">
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																					<div class="maasduin-actiefoto">
												<img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\maasduinpas.png">
											</div>
																			</div>
									<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>					
							</div>
						
												
												
												
												
												
								
						<input type="checkbox"  id="spoiler" />
					</div> 
					</div>


       <div class="row">	
	  <input type="checkbox"  id="spoiler5" /> 
 	  <label for="spoiler5" >Groepsaccommodatie</label>
 	  <div class="spoiler">
						
												
												
												
																				<div class="products">
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																			</div>
									<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon">T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>					
							</div>
						
												
												
												
												
								
						<input type="checkbox"  id="spoiler" />
					</div> 
					</div>

	  <div class="row">				
	  <input type="checkbox"  id="spoiler6" /> 
 	  <label for="spoiler6" >Hotels</label>
 	  <div class="spoiler">
						
												
												
												
												
																				<div class="products">
									<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
																			</div>
									<div class="maasduin-naam">hoi</h3></div>
									<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
									<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
									<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
									<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>					
							</div>
						
												
												
												
								
						<input type="checkbox"  id="spoiler" />
					</div> 
					</div>

      <div class="row">
	  <input type="checkbox"  id="spoiler7" /> 
 	  <label for="spoiler7" >Kamperen bij de boer</label>
 	  <div class="spoiler">
						
												
												
												
												
												
												
												
												
								
						<input type="checkbox"  id="spoiler" />
					</div> 
					</div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

Div onclick 

<div class="maasduin-container">
<div class="row">
  <input type="checkbox"  id="spoiler" /> 
  <label for="spoiler" >Appartementen</label>
  <div class="spoiler">
    <?php
                foreach($hotels as $key => $hotel)
                {
                    ?>
                    <?php if ($hotel['MaasduinCategory'] == 
              'Appartementen'): ?>

                            <div class="products-<?php echo $hotel['MaasduinId'];?>">
                            <div onclick="$('div#<?php echo $hotel['MaasduinId'] ?>-dialog').dialog('open')"></div>
                                <div class="maasduin-foto"><img src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>">
                                    <?php if ($hotel['MaasduinPas'] == '1'): 
                                    ?>
                                        <div class="maasduin-actiefoto">
                                            <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>">
                                        </div>
                                    <?php endif ?>
                                </div>
                                <div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div>
                                <div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div>
                                <div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div>
                                <div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div>
                                <div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>                
                            </div>

                    <?php endif ?>

                    <?php
                }
                    ?>      
                    <input type="checkbox"  id="spoiler" /> 
        </div>
    </div>

需要打开的对话框：

           <?php foreach($hotels as $key => $hotel)
                {
                    ?>
                                <div id="<?php echo($hotel['MaasduinId']) ?>-dialog">

                                <?php echo $hotel['MaasduinNaam']; ?>

                                </div>



            <?php   } ?>

1 个答案:

答案 0 :(得分：1)

我建议尝试一些东西：

  • 我必须以一封信开头。所以试试＆＃34;对话框 - ＆＃34;
  • 没有重复
  • 确保您的控制台在加载时或点击
    • 时不显示错误

如果没有任何效果，请按CTRL + U并将源保存在某处，以便我们检查它（https://jsfiddle.net/）

更新：修复html问题后，初始化对话框：

你需要＆＃34;初始化＆＃34;对话框。因此，为每个对话框div添加一个类，如class =＆＃34; dialog＆＃34;，然后在代码中的某处添加：

<script> var opt = { autoOpen: false, modal: true, width: 550, height: 650, title: 'Details' }; jQuery(function () { jQuery('.dialog').dialog(opt); }) </script>

或者只是使用$('div#dialog-XXXX').dialog(opt).dialog('open');来调用它，只需记住＆＃34; opt＆＃34;变量定义。

基本上这会告诉对话框如何打开实际的对话框。您可以随意自定义

相关问题
最新问题