Question

以下是该页面的视图来源。查看添加的<p>和<br />代码？那会破坏什么吗？

        <p><script type="text/javascript">
var $j = jQuery.noConflict();</p>
<p>$j.(document).ready(function() {
    $j('.jw_window').each(function() {
        var maxWidth = 762; // Max width for the image
        var maxHeight = 426;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $j(this).width();    // Current image width
        var height = $j(this).height();  // Current image height</p>
<p>        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $j(this).css("width", maxWidth); // Set new width
            $j(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }</p>
<p>        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $j(this).css("height", maxHeight);   // Set new height
            $j(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }
</script><br />
<script type='text/javascript'>
$j(document).ready(function() {</p>
<p>$j('.panel_2').hide();</p>
<p>      $j('.work').click(function(){
            $j('.panel').fadeOut(function(){
            $j('.panel_2').fadeIn();
            });
      });
});
</script></p>

Answer 1

在WordPress或任何其他可能已经在使用jQuery的框架中工作或者使用jQuery的插件时，使用noConflict()语句非常重要。

你只需要使用一次，但由于堆栈顺序在jQuery中很重要，它需要是你在外部.js文件或内联脚本中实现的jQuery的第一行。

尝试以下方法：

<script type="text/javascript">
var $j = jQuery.noConflict();

$j.(document).ready(function() {
    $j('.jw_window').each(function() {
        var maxWidth = 762; // Max width for the image
        var maxHeight = 426;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $j(this).width();    // Current image width
        var height = $j(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $j(this).css("width", maxWidth); // Set new width
            $j(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $j(this).css("height", maxHeight);   // Set new height
            $j(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }
</script>

现在您需要记住，您需要在下一个脚本中继续使用$j。所以你的下一个脚本如下：

<script type='text/javascript'>
$j(document).ready(function() {

$j('.panel_2').hide();

      $j('.work').click(function(){
            $j('.panel').fadeOut(function(){
            $j('.panel_2').fadeIn();
            });
      });
});
</script>

此外，您不需要在文档就绪语句中将$作为参数传递，因此我已将其删除。

在WordPress中，一个jQuery函数工作正常，但另一个没有。两者都在同一页面上。在单独的页面上尝试。没爱

1 个答案: