Question

我正在尝试动态地将图像添加到主div，并为他们提供＆＃34; card＆＃34;的类。我尝试了几种方法，但在检查元素时似乎没有添加类。

我已尝试过：

collection.forEach(function(pack){
        pack.forEach(function(info){
            if (info.golden === true){
                $('.main').append('<img src="' + info.imgGold + '"></img>');    
                } else {
                $('.main').append('<img src="' + info.img + '"></img>');
                }           
        });
        $('img').addClass('card');
        $('.main').append('<hr></hr>');
    });

我也尝试过：

collection.forEach(function(pack){
        pack.forEach(function(info){
            var image;
            var img = $('<img src="' + image + '"></img>');
            if (info.golden === true){
                image = info.imgGold;
                img.appendTo('.main').addClass('card');                     
                } else {
                image = info.img;
                img.appendTo('.main').addClass('card');

                }           
        });
        $('.main').append('<hr></hr>');
    });`

我也尝试过：

$('.main').append('<img class="card" src="' + info.img + '"></img>');

$('.main).append($("<div/>",{
  html : "<img src='" + image + "'/>",
  class : 'card'
}));

我也尝试使用

.attr('class', 'card');

CSS：

.card{
    cursor: pointer;
    height: 200px;  
}
.card:hover{
    opacity: 0.8;
}

HTML：

<html>
    <body>
        <header>
            <h1>Hearthstone Pack Simulator</h1>
                <form>
                <select name="sets" id="sets">
                    <option value="Classic">Classic</option>
                    <option value="Goblins vs Gnomes">Goblins vs Gnomes</option>
                    <option value="Journey to Un'Goro">Journey to Un'Goro</option>
                    <option value="Mean Streets of Gadgetzan">Mean Streets of Gadgetzan</option>
                        <option value="The Grand Tournament">The Grand Tournament</option>
                        <option value="Whispers of the Old Gods">Whispers of the Old Gods</option>
                </select>
                    <select name="no of packs" id="nop">
                        <option value="1">1</option>
                        <option value="2">2 - $2.99</option>
                        <option value="7">7 - $9.99</option>
                        <option value="15">15 - $19.99</option>
                        <option value="40">40 - $49.99</option>
                    </select>
                <input type="submit" id="submit">
                    <input type="submit" id="reset" value="Reset">
                </form>
        </header>
        <div class="tab_a">
            <h3>Collection</h3>
        </div>
        <div class="tab_b">
            <h3>Current Packs</h3>
        </div>
        <div class="tab_c">
            <h3>Extra Cards</h3>
        </div>
        <div class="data">
        </div>
        <div class="main">
        </div>
        <div id="myModal" class="modal">
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
        </div>
    </body>
</html>

感谢您的帮助。

Answer 1

解决方法可能是将card类放在此div上：<div class="main">然后将.card img {}添加到样式表中，它会将样式应用于该div中的所有图像

jquery将类添加到附加图像

1 个答案: