Wordpress网站上的HTML/CSS/JS显示不正确
Wordpress网站上的HTML/CSS/JS显示不正确
提问于 2014-03-12 06:58:25
我正试着在我的Wordpress页面上添加一个简单的复选框功能，当你切换复选框时，它会显示/消失图像。它在Wordpress环境之外运行得很好，但当我将代码放入WP页面时，只有复选框显示，但没有图像。单击复选框也不会执行任何操作。
我尝试过HTML代码片段和原始HTML插件，但都没有用。所以这是我最新的尝试，创建一个页面模板。
下面是您可以看到的页面：http://enchantingthedesert.com/10-photo-analysis/，密码是: xX2CNFv6
提前感谢！代码如下：
<?php get_header() ?>
<!-- Part 1: Wrap all page content here -->
<section class="wrap">
<!-- Begin page content -->
<div class="container">
<div class="row-fluid">
<html>
<meta charset="UTF-8">
<title>Photo Layers Toggling Demo</title>
<style>
body {
width:100%;
}
.photo {
position:absolute;
display:block;
left:0;
top:0;
width:100%;
width:864px;
height:100%;
clear: both;
}
.photo img {
width: 100%;
}
.hidden {
display:none;
}
#photoContainer{
display:inline-block;
position:relative;
float:right;
width:100%;
height:100%;
clear: both;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function initPhotoLayers(){
console.log("initPhotoLayers running");
var photosOnPage = $(".photo").length;
console.log("initPhotoLayers says " + photosOnPage + " photos");
for(var i=1;i<=photosOnPage;i++){
var defaultDisplayTemp = $('.photo:nth-child(' + i + ')').data('defaultdisplay');
console.log("initPhotoLayers saysdefaultDisplayTemp for " + i + " is " + defaultDisplayTemp);
var currentPhotoDiv = $('.photo:nth-child(' + i + ')');
if(defaultDisplayTemp == "hide"){
//fade out photo to hide it
currentPhotoDiv.fadeTo(0,0);
} else {
// fade in photo to show it
currentPhotoDiv.fadeTo(1000,1);
}
// remove display=none in any case
currentPhotoDiv.toggleClass("hidden");
}
}
function initCheckboxes(){
console.log("initCheckboxes running");
$('#overlay_tint')
.bind('click',function(event){
testCheckboxes(this.id);
});
$('#overlay_trails')
.bind('click',function(event){
testCheckboxes(this.id);
});
$('#overlay_placenames')
.bind('click',function(event){
testCheckboxes(this.id);
});
$('#overlay_trailnames')
.bind('click',function(event){
testCheckboxes(this.id);
});
}
function testCheckboxes(checkbox){
console.log("testCheckboxes running with checkbox at " + checkbox);
checkTarget = checkbox.split("_")[1];
if($("#" + checkbox).prop('checked')){
console.log(checkbox + " is checked!");
//$("#" + checkTarget).css("visibility","visible");
$("#" + checkTarget).fadeTo(200,1);
// true
} else {
console.log(checkbox + " is not checked!");
//$("#" + checkTarget).css("visibility","hidden");
$("#" + checkTarget).fadeTo(200,0);
}
}
/*
var imageNum = 20;
images/Img + imageNum + -base.jpg
photos = {
["Img10-base.jpg","base"]
};*/
</script>
<style id="clearly_highlighting_css" type="text/css">/* selection */ html.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 238, 150, 0.99); } html.clearly_highlighting_enabled ::selection { background: rgba(246, 238, 150, 0.99); } /* cursor */ html.clearly_highlighting_enabled { /* cursor and hot-spot position -- requires a default cursor, after the URL one */ cursor: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--cursor.png") 14 16, text; } /* highlight tag */ em.clearly_highlight_element { font-style: inherit !important; font-weight: inherit !important; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png"); background-repeat: repeat-x; background-position: top left; background-size: 100% 100%; } /* the delete-buttons are positioned relative to this */ em.clearly_highlight_element.clearly_highlight_first { position: relative; } /* delete buttons */ em.clearly_highlight_element a.clearly_highlight_delete_element { display: none; cursor: pointer; padding: 0; margin: 0; line-height: 0; position: absolute; width: 34px; height: 34px; left: -17px; top: -17px; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); background-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_element a.clearly_highlight_delete_element:hover { background-position: -34px 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { em.clearly_highlight_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow@2x.png"); } em.clearly_highlight_element a.clearly_highlight_delete_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }</style>
<body>
<div id="photoContainer">
<div class="photo" style="z-index: 1900; opacity: 1; display: block;" id="placenames" data-defaultdisplay="hide">
<img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-place-labels.png" data-defaultdisplay="hide" alt="" usemap="#locationMap">
<map name="locationMap">
<area shape="rect" coords="192,318,267,350" href="#" alt="berry butte">
<area shape="rect" coords="195,324,273,345" href="#" alt="berry butte">
<area shape="rect" coords="289,392,384,414" href="#" alt="horseshoe mesa">
<area shape="rect" coords="104,426,197,446" href="#" alt="grandview trail">
<area shape="rect" coords="346,316,458,335" href="#" alt="South Kaibob">
</map>
</div>
<div class="photo" style="z-index: 900; opacity: 1; display: block;" id="trailnames" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trail-names.png" alt=""></div>
<div class="photo" style="z-index: 800; opacity: 1; display: block;" id="trails" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trails.png" alt=""></div>
<div class="photo" style="z-index: 700; opacity: 0; display: block;" id="tint" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-tinting.jpg" alt=""></div>
<div class="photo" style="z-index: 600; opacity: 1; display: block;" id="bw" data-defaultdisplay="show"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-bw-photo.jpg" alt=""></div>
</div>
<script>
$(document).ready(function(){
initCheckboxes();
initPhotoLayers()
});
</script>
<div style="display:inline; position: block; font-family: Adamina" id="imageControls">
<form name="toggler">
Display layers:
<label>
<input type="checkbox" name="Overlays" value="placenames" id="overlay_placenames">
Place names</label>
<label>
<input type="checkbox" name="Overlays" value="trails" id="overlay_trails" schecked="">
Trails</label>
<label>
<input type="checkbox" name="Overlays" value="trailnames" id="overlay_trailnames" schecked="">
Trails names</label>
<label>
<input type="checkbox" name="Overlays" value="tint" id="overlay_tint">
Tinting</label>
</form>
</div>
</body>
</html>
</section><!-- Wrap page -->
</div><!-- Row page -->
</div><!-- Content page -->
<?php get_footer() ?>回答 1
Stack Overflow用户
发布于 2014-03-12 07:58:44
首先，您需要清除代码。看一看页面源代码，你会发现它完全是一团糟:你有“页面内的页面”(嵌套的<html>标记)，jQuery库被调用了两次(一次在<header>之外)。
尝试清除html代码以使其符合标准，删除不必要的jQuery调用，然后再次检查它。可能还有其他一些问题，但在当前状态下可能无法找到或更正-首先要做的是:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22338476
复制相关文章
相似问题
腾讯云开发者
