Question

我试图为我的一篇Joomla文章添加一点功能。功能很简单，当你单击一个字符串时，html显示。我制作了一个独立的HTML并且它正在工作。

现在我试图将代码包含在我的Joomla文章中，但它不起作用。这就是我在文章的源代码中添加的内容。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

<!-- BUTTONS  -->
<div class="buttons">
    <a class="showItem" target="1">First string</a><br>
    <a class="showItem" target="2">Second string</a><br>
</div>

<!-- Shows HTML page when you click in 'First string' -->
<div id="div1" class="targetDiv" style="display: none">
    <div id="m1" style="margin: 0 auto; width:100%; height:400px;">
        <object type="text/html" data="http://show_a_html_page.html"
                style="width:100%; height:100%; margin:1%;">
        </object>
    </div>
</div>

<!-- Shows HTML page when you click in 'Second string' -->
<div id="div2" class="targetDiv" style="display: none">
    <div id="m2" style="margin: 0 auto; width:100%; height:400px;">
        <object type="text/html" data="http://show_a_html_page.html"
                style="width:100%; height:100%; margin:1%;">
        </object>
    </div>
</div>

这不是编辑器的问题（也就是说它没有删除<script>标签）。

我是否要在脚本中更改某些内容才能使其正常工作？

如果这很有趣，在我的帖子中添加代码为Source Code之后，这就是显示TinyMCE的内容。它会为代码和<p>添加一些/ <![CDATA[。这是对的吗？

<p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>// <![CDATA[
jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    });
// ]]></script>
</p>

Answer 1

正如@BhojendraNepal所说，这是一个冲突问题。我通过向函数添加var $ = jQuery.noConflict();来修复它。

<script>
    jQuery(function(){
        var $ = jQuery.noConflict();
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

编辑：标记为重复的问题并未提供问题的答案。正如答案所述，我在加载<script>jQuery.noConflict(true);//remove jquery</script>之前添加了jquery，但它没有效果：

<script>jQuery.noConflict(true);//remove jquery</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    jQuery(function(){
        jQuery('.showItem').click(function(){
                    jQuery('.targetDiv').hide();
                    jQuery('#div'+$(this).attr('target')).show();
            });
    }); 
</script>

只需在函数内添加var $ = jQuery.noConflict();即可。

Javascript在我的Joomla文章中无法正常工作

1 个答案: