javascript - javascript在joomla 3.0中不起作用

我有一个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，我已经尝试过了，但是没有用。
我可能会做错什么？我将不胜感激。

最佳答案

您仍然在导致问题的.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);