打开Div onclick对话框，由于某些原因无法工作。
打开Div onclick对话框，由于某些原因无法工作。
提问于 2017-09-05 11:12:59
它看起来像这样：图像
我是JQuery的新手，我试着联系其他人，但他们也不知道为什么不起作用。
我真的被这个问题困住了，我希望堆叠溢出的人知道这个问题。如果需要添加更多代码，请发送评论，我会添加它。
<!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>
Div按一下
<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
Stack Overflow用户
回答已采纳
发布于 2017-09-05 11:30:20
一些我建议尝试的东西：
- 身份证必须以字母开头。所以试试“对话-”
- 没有重复的
- 确保控制台在加载或单击时没有显示错误。
如果没有工作，点击CTRL+U并将源代码保存在某个地方，这样我们就可以检查它(https://jsfiddle.net/)
Update:修复html问题后，初始化对话框：
您需要“初始化”对话框。因此，向每个对话框div添加一个类，如class=“对话框”，然后将其添加到代码中的某个地方：
<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');调用它，只需记住要定义"opt“变量。
这基本上告诉对话框如何打开实际的对话框。您可以任意自定义它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46053560
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号