javascript 在 joomla 3.0 中不起作用

Question

我有一个 javascript 代码，它根据选择框选项值显示 div 内容。 该代码在 html 中运行良好，但在 Joomla 3.0 中却不行。

在 Joomla 的 php 中我有这个脚本：

  <?php


    //jQuery Framework in noConflict mode  

    JHtml::_('jquery.framework', false);  

    $document = JFactory::getDocument();  

    $document->addScriptDeclaration('  

    jQuery(document).ready(function(){  

    jQuery("select").change(function(){  

    jQuery( "select option:selected").each(function(){  

        if($(this).attr("value")=="3"){  

        $(".box").hide();  

        $(".choose").show();  

        }  

         if($(this).attr("value")=="5"){  

         $(".box").hide();  

         $(".green").show();  

         }  

         if($(this).attr("value")=="6"){  

         $(".box").hide();  

         $(".blue").show();  

         }  

         if($(this).attr("value")=="7"){  

         $(".box").hide();  

         $(".red").show();  

         }  

         });  

         }).change();  
    });  


');    

// Disallow direct access to this file  
defined ( '_JEXEC' ) or die ( 'Restricted access' );    

  ?>

这是下拉表单：

<select id="profiletypes" name="profiletypes" class="select required pt-font-color">
            <option value="3">option3</option>
            <option value="5">option5</option>
            <option value="6">option6</option>
            <option value="7">option7</option>
        </select>

<div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

与 CSS 一起：

//select::-ms-expand { /* for IE 11 */
     display: none; }


 div.registerProfileType .pt-font-color{       background:
 url(/images/sports-5.png) 96% / 15% no-repeat #6d9dc0;
     color:#fff; }

 .box{
         padding: 20px;
         display: none;
         margin-top: 20px;
         border: 1px solid #000;
     }
     .red{ background: #ff0000;
     }
     .green{ background: #00ff00;
     }
     .blue{ background: #0000ff;
     }
     .choose{background: #ffffff;
     }

 </style>

我知道在 joomla 3.0 中我们需要使用 Jquery 而不是 $，如果我们正常调用 JQuery，我已经尝试过，但它不起作用。 我可能做错了什么？如有任何帮助，我将不胜感激。

Answer 1

您仍在导致问题的 .each 循环中使用 $。另一个问题是循环导致多次重定向。如果您在 PHP 脚本中使用以下代码块，它应该可以按预期工作（默认选择选项 3，但选择另一个选项会更改 div 的颜色等）。

// jQuery Framework in noConflict mode  
JHtml::_('jquery.framework', false);  

$document = JFactory::getDocument();  
$js =<<<JS
jQuery(document).ready(function(){  
    jQuery("#profiletypes").change(function(){  
        if(jQuery(this).attr("value")=="3"){  
            jQuery(".box").hide();  
            jQuery(".choose").show();  
        }  

        if(jQuery(this).attr("value")=="5"){  
            jQuery(".box").hide();  
            jQuery(".green").show();  
        }  

        if(jQuery(this).attr("value")=="6"){  
            jQuery(".box").hide();  
            jQuery(".blue").show();  
        }  

        if(jQuery(this).attr("value")=="7"){  
            jQuery(".box").hide();  
            jQuery(".red").show();  
        }  
    }).change();  
});
JS;
// The above 'JS' must be at the start of the line, not tabbed in

// Add the JS
$document->addScriptDeclaration($js);