javascript在Joomla3.0中不起作用

Question

我有一个javascript代码，它根据选择框选项值显示div内容。该代码在html中运行良好，但在Joomla3.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>

我知道在Joomla3.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);