2014-06-14 3 views
0

Je rencontre des problèmes avec certains javascript ne pas exécuter lors de la génération html en utilisant php.Erreur avec php et html erreur javascript

Voici mon fichier. Le javascript sur cette page fait toutes les envergures la largeur de la plus grande travée dans l'ol utilisant jquery mais elle échoue quand j'essaye d'ajouter <li></li> élément, quelqu'un peut-il me dire pourquoi le li a indiqué ci-dessous fait échouer le manuscrit largeur de la plus grande envergure.

<html> 
<head> 
<style> 
.codesnippet { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    border: thin solid black; 
    width: 740px; 

} 
.codesnippet .heading { 
    padding-left: 10px; 
    background-color: lightblue; 
    height: 25px; 
} 
.codesnippet .content { 
    background-color: white; 
    white-space: nowrap; 
    overflow: scroll; 

} 
.codesnippet .grey { 
    background-color: lightgrey; 
    margin: 0px; 
    display: inline-block; 
    min-width: 683px; 
} 
.codesnippet .white { 
    background-color: white; 
    margin: 0px; 
    display: inline-block; 
    min-width: 683px; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
window.onload = function() { 
    var spanwidth = [] 
    l = 0; 
    var ollength = $('ol').length; 
    for (var i = 0; i < ollength; i++) { 
     $('ol').eq(i).children('li').each(function() { 
      spanwidth.push($(this).children('span').width()); 
      l++; 
     }); 
     makeThemEqual(i, spanwidth); 
     l = 0; 
    } 
} 
function makeThemEqual(i, spanwidth) { 
    var a = 0; 
    var widest = spanwidth[0]; 
    $('ol').eq(i).children('li').each(function() { 
     if (widest < spanwidth[a]) { 

      widest = spanwidth[a]; 
     } 
     a++; 
    }); 
    if (widest > 683) { 
     $('ol').eq(i).children('li').each(function() { 

      $(this).children('span').width(widest + "px"); 
     }); 
    } 
    widest = 0; 

} 
</script> 
</head> 
<body> 
<div class="codesnippet"> 
<div class="content"> 
<?php echo 
"<ol>". 
"<li><span class='grey'>".htmlspecialchars("<?php")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("/*")."</span></li>". 
"<li><span class='grey'>".htmlspecialchars("Plugin Name: PlacePluginNameHere")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("Plugin URI: PlaceWebsiteAddressHere")."</span></li>". 
"<li></li>". //<--------------------- THIS CAUSES IT TO FAIL if this li is removed the script runs fine. 
"</ol>"; 
?> 
</div> 
</div> 
<div class="codesnippet"> 
<div class="content"> 
<?php echo 
"<ol>". 
"<li><span class='grey'>".htmlspecialchars("<?php ?>")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("<div class=\"wrap\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<div>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<form method=\"post\" action=\"options.php\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php settings_fields('Template_Settings'); ?>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php ")."$".htmlspecialchars("options = get_option('Template_Settings'); ?>")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<label>Example Setting</label> <input type=\"text\" name=\"Template_Settings[ExampleSetting]\" value=\"<?php echo ")."$".htmlspecialchars("options['ExampleSetting']; ?>\"><br>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<label></label><input type=\"submit\" name=\"Submit\" value=\"<?php esc_attr_e('Save Changes'); ?>\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</form>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</div>")."</span></li>". 
"<li><span class='grey'>".htmlspecialchars("</div>")."</span></li>". 
"</ol>"; 
?> 
</div> 
</div> 
</body> 
</html> 

Répondre

1

thats parce que suivant la ligne

... 
$(this).children('span').width(widest + "px"); 
.. 

Trie pour obtenir <span> étiquette de <li> et dans votre cas, vous n'avez pas <span> tag pour la dernière <li>, alors essayez de changer:

..<li></li> 
.. 

à

.. 
<li><span></span></li> 
.. 
+0

Avoir le span là il échoue toujours – mainuse4r