JavaScript 不显示红叉

JavaScript not showing red cross

本文关键字：显示 JavaScript      更新时间：2023-09-26

大家好，所以我正在使用javascript取回搜索结果，并且正在努力使红叉出现在右侧。

因此，当用户搜索我的数据库并出现结果时，我希望在其右侧显示一个 X。所以例子： 

Search result 1              X

我已经在CSS中制作了X： 

    #markx {
        color: Red;
        font-family: 'Helvetica', 'Arial', sans-serif;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        width: 40px;
        height: 40px;
        border-radius: 5px;
    }

我的代码： 

         $(".result li").click(function(){
            var text= $(this).text();
            $('.selectedStuff').append('<li>' + text +' (selected)<span id="markx">&times;</span></li>');
         });

出于某种原因，那些它没有像我希望的那样出现在 javascript 中。在css中它很好，但显然我希望X出现在我发出的每个搜索请求旁边，以便以后用户可以取消该请求。

在我看来，通过使用JS来获取动态X，您过度考虑了这一点。您可以使用 CSS 特异性和伪选择器以更轻松的方式实现此目的。

使用这个：

.selectedStuff > div{
    width:300px;
}
.selectedStuff > div:after{
    content:" x ";
    font-family: Arial;
    color: red;
    position:relative;
    float:right;
    right:-20px;
}

以同样的方式，我通过 CSS 将宽度添加到 .selectedStuff 类中，您也可以对所有其他属性执行此操作，而不是在 jQuery 中对它们进行硬编码。这使您的代码更易于维护。

X

是一个简单的字母X，但如果你想要更好看的东西，请使用fontAwesome库并将其添加为Web字体图标。

这是一个演示

附言我注意到在您的 JS 中您打算生成一系列LIs但是当我在 CODEPEN 中运行时，呈现的代码DIVs。如果你的产生LIs，只需替换上面的 CSS > div即可> li

相关文章：