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