joomla 3.0でjavascriptが動作しない

Question

私は選択ボックスのオプション値によってdivコンテンツを表示するjavascriptコードを持っています。 コードはhtmlでは正常に動作しますが、Joomla 3.0では動作しません。

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

    ?> 

そして、これは、ドロップダウンフォームです：CSSとともに

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

：私はこのスクリプトを持っているのJoomlaのPHP内部

//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> 

私はジョムラ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);