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);