js css 为啥 用js删除一个节点后、显示时后面的标签没往上移呢（ie8以下 是这样,其他正常）、谢谢啊

Posted 2023-04-06

朋友们、为什么 用js删除一个节点后、显示时后面的标签没往上移呢（ie8以下 是这样）、谢谢啊
代码如下：
body background: #FF99FF
h2 margin:50px auto;
#name margin:50px auto;width:455px;line-height:35px;letter-spacing:2px;font-size:25px;
span border:1px solid white;display:inline-block;width:100px;height:35px;background-color:skyblue;letter-spacing:2px;text-align:center;
input cursor: pointer;width:120px;height:40px;font-size:30px
lack font-size:20px;color:white;border:1px solid pink;display:inline-block;width:75px;height:32px;border:solid 1 green;background-color:red;letter-spacing:2px;text-align:center;
。。
。。
。。
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
。。
。。
。。
$("span:eq("+rnd+")").remove(); rnd是产生的一个随机数

----能删除，就是删除了后面的元素不往上移。ie8以下的是这样-.感谢各位---

参考技术A window.location.reload;
删除后刷新一下试试。

编译/运行时后的 Vue.js 动态图像路径

【中文标题】编译/运行时后的 Vue.js 动态图像路径

【英文标题】：Vue.js Dynamic Image paths after compiling/runtime

【发布时间】：2019-06-05 20:12:05

【问题描述】：

我在使用 Vue.js 设置动态图像路径时遇到问题。我正在使用 Vue-Cli 来构建项目。

我相信这个问题是因为我在运行时之后动态引用图像路径。通常，对我的 ./assets/ 文件夹的引用似乎在运行后转换为 ./img/ 。由于我在加载后动态更改 url，因此路径似乎无法工作/加载。 Country 最初是通过 store getter 设置的，但随后从语言选择下拉列表中进行 v 建模，其中的值对应于 url 后缀。

    <div id="flag-container" :style=" backgroundImage: `url($src)` "></div>

    computed: 
            src()
                return `./assets/flags/flag-$this.country.png`;
            
        ,

    data() 
        return 
            country: this.$store.getters.language
        
    

Inspector 显示 url 更改已实现。

对此有最佳解决方案的建议吗？

【问题讨论】：

您在 devtools 中检查了网络选项卡吗？图像是否正确链接？它们存在于服务器上吗？ Inspector 显示 url 更改已实现。 因此，当您检查 dom 时，您可以看到更改国家/地区时正确设置了 url()？

你能添加渲染的例子<div id="flag-container" ...>

是，我看到了在 HTML 中实现的更改，但没有渲染图像。

请查看answer或one

@MichaelPaccione 不仅是单个图像，只需添加 require，查看此 webpack 文档部分 webpack.js.org/guides/dependency-management/…

【参考方案1】：

不要使用

data() 
    return 
        country: this.$store.getters.language
    

因为它将停止响应存储更改。使用计算属性

<div id="flag-container" :style=" backgroundImage: `url($src)` "></div>

computed: 
    src()
        return `./assets/flags/flag-$this.country.png`;
    ,
    country() 
        return this.$store.getters.language
    
,

【讨论】：

我理解您对数据流的看法...让商店成为主要来源并从中进行更新。我在这个组件上拥有的是 v 建模的本地数据值，然后 @change 我更新了商店。所以这不是我可以看到的问题，因为当我更改我的选择时，我看到 URL 发生了变化。

【参考方案2】：

使用 webpack 需要上下文，beforeMount，我能够将图像以 base64 格式存储在对象中。我存储了对象并使用动态键访问它。感谢 Max 引导我找到正确的文档。

        beforeMount()
            var that = this;
            function importAll (r) 
              r.keys().forEach(key => that.imgCache[key] = r(key));
            

            importAll(require.context('../assets/flags/', true, /\.png$/));
        ,
        computed: 
            src()
                var key = `./flag-$this.country.png`,
                    url = this.imgCache[key];

                return url;
            
        ,