小编Ste*_*hen的帖子

有没有办法在Javascript或jQuery中找出HTML元素何时被动态地添加到DOM中,或通过jQuery.append()本机Javascript的节点操纵器之一？可能有几种不同的方法可以动态地将HTML元素添加到页面中,因此我不确定应该监听哪些事件或事件.

具体示例是通过第三方Javascript代码将锚标记添加到页面中(我无法修改或轻松闪烁).我想更改链接的文本.

我希望有一些比setTimeout()循环更好的东西$(SOME ELEMENT).length > 0.(我在其中看到的一部分如何确定是否已将动态创建的DOM元素添加到DOM中？但它是从2008年开始的)

我有一个div类overflow: auto; 有没有办法控制滚动条出现时？

我有一个ajax照片库(没有页面刷新),其中一些标题文本在a中div,但内容的长度各不相同.如果向下滚动此div,然后前进到下一张幻灯片,滚动条不会返回到顶部.所以,我想知道是否有办法控制这个滚动条.谢谢.

一点建筑问题......

我最初创建了一个Javascript单例来容纳在CMS系统的模板文件中操作照片库模块所需的方法.原始规范仅在页面上调用此照片库模块的一个实例.(下面的代码简化了我实际编写的内容.)

发布代码后不久,我突然意识到,即使规范要求该模块的一个实例,如果一个页面有两个模块实例(即用户通过该页面添加两个照片库),这个代码就会崩溃. CMS).现在,HTML标记是安全的,因为我使用了类名,但是如何重构我的Javascript和jQuery事件监听器以便能够处理多个模块？您可以假设每个照片库都有自己的JSON-P文件(或者如果您认为可以使用一个JSON-P文件更优雅地处理它,则可以假定单个JSON-P文件).

我认为我原来的jQuery事件监听器可能必须转换为$ .delegate(),但我不知道在那之后该怎么做以及如何处理转换我的单例.任何线索将不胜感激.如果您提供代码,我更喜欢可读性而不是优化.

我不是在问这个问题,因为我迫切需要解决工作中的问题.我问这个问题是前瞻性的,并且是一个更好的Javascript开发人员,因为我希望将来遇到这个问题,并希望做好准备.

谢谢你的阅读.

HTML

<div class="photoGalleryMod">
    <div class="photoGalleryImgBox"><img src="http://www.test.org/i/intro.jpg" alt="Intro Photo" /></div>
    <div class="photoGalleryImgCap"><p>Caption</p></div>
    <a href="#" class="photoGalleryPrevImgLnk"></a>
    <a href="#" class="photoGalleryNextImgLnk"></a>  
</div>

Javascript是一个外部静态文件,它通过CMS创建的$ .getSCript()调用JSON-P文件.

使用Javascript/jQuery的

(function($) {
    photoGalleryModule = {
        json: '',
        numSlidesInJson: '',
        currentSlide: '',
        updateSlide: function (arg_slidNum) {
            /* Update the slide here */
        },
        init: function (arg_jsonObj) {
            this.json = arg_jsonObj;
            this.numSlidesInJson = this.json.photoGallerySlides.length;
            this.currentSlide = 0;
        }
    };

    $(document).ready(function() {
        $.getScript('./photogallery.json');

        $('.photoGalleryPrevImgLnk').live('click', function(event) {
            photoGalleryModule.currentSlide = photoGalleryModule.currentSlide - 1;
            photoGalleryModule.updateSlide(photoGalleryModule.currentSlide);
            event.preventDefault();
        }); …

我使用 Vue UI（Vue-CLI 3 附带的那些）构建了我的简单站点，并在 /dist 文件夹中创建了源映射。我将这些源映射与生产文件一起部署。当我加载我的网站时，Chrome 显示它无法解析 Devtools 中的源地图。

DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map

我在 vue.config.js 中尝试了以下内容：

module.exports = {
    css: {
        // modules: true,
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // @/ is an alias to src/
                // so this assumes you have a file named `src/scss/variables.scss`
                data: `@import "@/scss/_globals.scss";`
            }
        }
    },
    configureWebpack: {
        devtool: '#source-map'
    }
}

和

module.exports = {
    css: {
        // modules: true,
        loaderOptions: {
            // pass options to …

我有一些仅在移动设备上进行的广告致电。在Chrome浏览器中，我可以使用“设备模式”并模拟移动设备，并且来自服务器的广告调用已正确地针对移动设备进行了定制。我不确定Chrome如何做到这一点，除非可能会发送其他用户代理。

在Cypress.io文档中，它说可以在配置文件（Cypress.json）中更改用户代理。但是，我需要先对桌面视口进行测试，然后再对具有移动用户代理的移动视口进行测试。有没有办法以编程方式更改用户代理？

我定义了一个RequireJS模块(见下文).它是站点上每个页面所需的函数集合.

返回对象中的一个函数initTwitter()需要在同一个对象中调用另一个函数shortenURL().我收到一个控制台错误,上面写着"TypeError:this.shortenURL不是函数".

所有这些函数最初都是在一个普通的Javascript单例对象中,代码运行正常.我是RequireJS的新手,所以我不确定这个关键字在RequireJS中的工作方式是否有所不同,或者我只是做错了什么.

编辑:我也尝试删除'this',但我得到一个"ReferenceError:shortenURL未定义"消息.

define(['config', 'jquery'], function(config, $) {
    /* Site-wide functions go here */

    return {
        doesObjPropertyExist: function(obj, prop) {
            var parts = prop.split('.');
                for(var i = 0, l = parts.length; i < l; i++) {
                    var part = parts[i];
                    if(obj !== null && typeof obj === "object" && part in obj) {
                        obj = obj[part];
                    }
                    else {
                        return false;
                    }
                }
            return true;
        },
        /** 
         * Shorten URL via bit.ly
         * Requires a callback function, so that …

我遇到了一个我不知道解决方案的问题.

假设我有这个HTML标记(由服务器动态生成或只是静态文件):

<ul class="myList">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<!-- ... -->
<li><a href="page1000.html">Page 1000</a></li>
</ul>

我想将click事件处理程序绑定到<a>标记.通常,我会写出来

$('.myList').find('a').click(function() {});  /* Or something similar */

这将对所有锚标记执行隐式迭代,以将click事件绑定到每个锚标记.但是,我被告知这是一项昂贵的操作.

我被问到是否有某种方法只能附加一个事件监听器(在ul标签上)并使用事件冒泡来确定单击了哪个锚标签.我从未遇到过这样的事情,所以我不知道答案.显然,有一个答案.有人知道如何在元素上放置单个事件监听器并让它知道单击了哪个子元素吗？(我仍然需要使用event.preventDefault()来阻止默认的单击事件.)

我加载了一个输出 HTML、CSS 和其他 Javascript 的 Javascript 小部件。

页面的源代码（test.html）只是

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Widget Test</title>
</head>
<body>
    <div id="widget"></div>
    <script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async">
</script>
</body>
</html>

该脚本执行并生成一个小部件。我可以在 Chrome DevTools 的“元素”选项卡中看到 HTML 节点。当检查特定元素时，检查器说它的样式位于 test.html:239，但是当我单击该链接时，它会再次显示源页面。

当我在 Firebug 中加载页面时，单击行号会将我转到由 Firefox 维护的样式表的内部版本。Chrome DevTools 是否也可以做到这一点？我喜欢 Firebug 动态生成 CSS 的输出，因为我可以非常轻松地复制和粘贴。

假设有一个 LESS 变量以十六进制表示 CSS 颜色

@primary-color: #0070B8;\n

在 LESS 代码的其他地方，@primary-color 的操作如下。

@new-color: @primary-color + 10%;\n

@新颜色是#0a7ac2。

LESS 是如何得出新颜色的？ 我尝试查看@primary-color 与 @new-color的 rgb 和 hsl 版本，但我没有看到这些值在任何比例下有 10% 的差异。看起来它为十六进制颜色的R/G/B 分量添加了绝对值 10 ，但这似乎违反直觉。（我认为 SASS 的工作原理类似。）

#0070B8\n0,112,184\n(0,112,184)\nrgb(0,112,184)\nrgb(0%,44%,72%)\nhsl(203\xc2\xb0 100% 36%)\n\n#0a7ac2\n10,122,194\n(10,122,194)\nrgb(10,122,194)\nrgb(4%,48%,76%)\n203\xc2\xb0 90% 40%\n

（编辑：我没有编写这个 LESS 代码。我在一个存储库中看到了它，我试图弄清楚它是如何工作的，因为我在 LESS 文档中找不到任何解释在 + 中使用百分比时的内容操作。粗体文本是由其他用户添加的。）

<div class="grid">
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
    <div class="box">
          <div class="a"></div>
          <div class="b"></div>
          <div class="c"></div>
    </div>
</div>

当我执行

var rootElement = $('.grid').find('.box');

rootElement 包含一组jQuery对象.

如何访问此集合中的特定jQuery对象？我不想使用.each(),因为我不一定要遍历整个集合.

我知道这有效,但这看起来很尴尬.

var index = 1;
$(rootElement.get(index)).find('.a'); /* Use chaining to do more work */

有更优雅的方式吗？谢谢.