حدث Onclick يعمل ولا يعمل على نفس الكود

StackOverflow https://stackoverflow.com//questions/24037297

  •  21-12-2019
  •  | 
  •  

سؤال

لدي هذه الصفحة حيث لدي قائمة (باستخدام Pure) ولدي بعض الروابط التي يمكن تشغيل جافا سكريبت عند النقر عليها لتغيير صورة على الصفحة.لسبب ما، عندما يكون الرمز داخل القائمة النقية، فإنه لا يعمل.عندما يكون خارج القائمة فإنه يعمل دون مشكلة.

هل هناك أي أفكار لماذا يحدث هذا أو أي نصائح لحل أكثر أناقة؟

<html>
<head>
<title>Dashboard</title>

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

<script>
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return; 
}
</script>

</head>
<body>

<div id="demo-horizontal-menu">
<a href="#" class="pure-menu-heading">Site Title</a>
    <ul id="std-menu-items">

        <li>
            <a href="#">Menu (Not Working)</a>
            <ul>

                <li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
                <li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
                <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>

            </ul>
        </li>
    </ul>
</div>

<div id="image-dash">
<img src="1.jpg" border="0">
</div>

<p>These links here will work for some reason..</p>
<ul>
<li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
<li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
 <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>
</ul>

</body>
</html>
هل كانت مفيدة؟

المحلول

أعتقد أن مشكلتك مرتبطة بكيفية إنشاء عنصر واجهة مستخدم قائمة YUI.إذا ألقيت نظرة على الكود المعروض، يمكنك أن ترى أن علامات الربط الخاصة بك لا تحتوي على onclick السمة بعد الآن:

بناء الجملة الأصلي (يحتوي على onclick)

<li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>

عنصر قائمة yui المعروض (لا يحتوي على زر onclick)

<li id="menuItem-yui_3_17_2_1_1402336941070_76" class="pure-menu-item" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1402336941070_87" role="menuitem">
    <a href="#" class="pure-menu-label" data-item-id="menuItem-yui_3_17_2_1_1402336941070_76" id="yui_3_17_2_1_1402336941070_87">Dashboard 1</a>
</li>

ومع ذلك، لديك بعض الخيارات:

  • تعمق في YUI API للعثور على طريقة لإضافة سمات إلى عناصر القائمة (مستحسن)

  • استخدم href لتنفيذ وظيفة جافا سكريبت الخاصة بك:

    <a href="javascript:changeIt('1.jpg','image-dash');">Dashboard 1</a></li>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top