javascript - 如何将嵌套的全局或局部 jquery 变量调用到 html 中？

Question

我遇到这个问题，我已经尝试了几天但没有成功。任何帮助将不胜感激。

我想将嵌套 jQuery 中的变量调用到 html 中。我将变量命名为“PROBLEM”。我什至尝试使其成为全局的，但是当我在函数内本地更新它时

$(".dropdown dd ul li a").click(function() { }

更改仍然是本地的。我怎样才能做到这一点？谢谢。注意/我已经通过粘贴整个函数进行了更新。我在网上找到了这个函数并对其进行了修改，使其执行图像和文本的选择功能。我想知道发生这种情况时，像 facebook 那样的选择，以便我可以用 facebook 页面更改注册页面，

 <span =email>

上面的部分可以帮助我知道它是电子邮件还是其他社交媒体网站。运行时 警报(文本)

显示

<span =email=""><img class="flag flagvisibility" src="media/Email_icon.png" alt="" style="margin-bottom:0px" height="30" width="30" align="left&quot;"> Email</span>

我用

var n1 = text.indexOf("=") + 1;
            var n2 = text.indexOf("=", n1);// OR SIMPLY USE c=text.slice(text.indexOf("=")+1, text.indexOf("=", text.indexOf("=")+1))
            n3 = text.slice(n1, n2)
            PROBLEM[0] = text.slice(n1, n2)

为了获得等号“=”的第一个和第二个索引，我可以从中提取其电子邮件或其他社交媒体网站。我希望这有帮助

这里是全部内容

</style>
<script type="text/javascript">
    var PROBLEM =[]
    $(document).ready(function() {
        $(".dropdown img.flag").addClass("flagvisibility");

        $(".dropdown dt a").click(function() {
            $(".dropdown dd ul").toggle();
            return false; //This is the important part
        });

        $(".dropdown dd ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            //$("#result").html(text);
            //$("#result").html("Selected value is: " + getSelectedValue("sample"));
            $("#result").html("Selected value is: " + text);
            var n1 = text.indexOf("=") + 1;
            var n2 = text.indexOf("=", n1);// OR SIMPLY USE c=text.slice(text.indexOf("=")+1, text.indexOf("=", text.indexOf("=")+1))
            n3 = text.slice(n1, n2)
            PROBLEM[0] = text.slice(n1, n2)
            //return false; //This is the important part
        })


        function getSelectedValue(id) {
            return $("#" + id).find("dt a span.value").html();
        }

        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown dd ul").hide();

        });

        $("#flagSwitcher").click(function() {
            $(".dropdown img.flag").toggleClass("flagvisibility");
        });
    });


</script>


<dl id="sample" class="dropdown">
        <dt style="vertical-align:middle"><a href="#"><span ><img class="flag" src="media/Email_icon.png" alt="" width="30" height="30" align=left" style="margin-bottom:0px"/> Email</span></a></dt>
    <dd>
        <ul>
            <!--the use  of names like  email, face book in the span is just for some  dirty  steps in the javascript above .indexOf("=")-->
            <li><a href="#"><span =email><img class="flag" src="media/Email_icon.png" alt="" width="30" height="30" align=left" style="margin-bottom:0px" /> Email</span></a></li>
            <li><a href="#"><span =facebook><img class="flag" src="media/Facebook_icon.png" alt="" width="30" height="30" align=left" style="margin-bottom:0px" /> Facebook</span></a></li>
            <li><a href="#"><span =twitter><img class="flag" src="media/Twitter_icon.png" alt="" width="30" height="30" align=left" style="margin-bottom:0px" /> Twitter</span></a></li>
            <li><a href="#"><span =linkedin><img class="flag" src="media/Linkedin_icon.png" alt="" width="30" height="30" align=left" style="margin-bottom:0px" /> LinkedIn</span></a></li>
        </ul>
    </dd>
</dl>
<span id="result">

Answer 1

我认为这个问题是因为您没有阻止超链接默认操作的发生而引起的。您需要使用 return false; 或 event.preventDefault(); 来阻止链接回发。

var PROBLEM = [];
$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");

    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();

        return false; //This is the important part
    });

    $(".dropdown dd ul li a").click(function() {

        var text = $(this).html();

        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + text);

        var n1 = text.indexOf("=") + 1,
            n2 = text.indexOf("=", n1);

        n3 = text.slice(n1,n2);
        PROBLEM = text.slice(n1,n2);

        return false; //This is the important part
    }
});

此外，您的 jQuery 就绪事件的格式不正确:

$(document).ready(function() {

}); // your missing this closing bracket.