Question

大家好，所以我使用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出现在我之后发布的每个搜索请求旁边，用户可以取消该请求。

Answer 1

在我看来，你是通过使用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库并将其添加为网络字体图标。

这是DEMO

P.S。我注意到在你的JS中你打算生成一系列LIs，但是当我在CODEPEN中运行它时代码呈现DIVs。如果您的LIs生成> div，请将> li我的CSS替换为{{1}}

JavaScript没有显示红十字

1 个答案: