Question

我正在尝试更改动态创建的div h3中.card的颜色，但是，当我重新加载页面时，它会将其值设置为默认值。

这就是我尝试更改参数中color是要应用于h3所需颜色的颜色的方法。

点击按钮，我正在创建卡片：

function createCard(id, title, ...) {
    // Creates a main card div
    var $cardDiv = $('<div>', {
        class: 'col-md-12 card',
        "card-id": id
    });

    // h3 tag with title of note
    var $title = $('<h3>', {
        "data-toggle": 'modal',
        "data-target": '#update',
        click: function() {
            updateModal(id, title, note);
        }
    }).text(title);

    // Append to card
    $cardDiv.append($title);
}

在此之后，我正在调用cardScheme方法：

cardScheme('#29ABDA');

function cardScheme(color) {
    $('.card h3').css('color', color);
}

我意识到JavaScript / jQuery无法找到.card类，因为这些卡是动态创建的。

var cards = document.getElementsByClassName('card');
for (var i in cards) {
    console.log('cards', cards[i]);
}
// returned {cards, 0}

如何更改h3的颜色？

Answer 1

您可以在cardScheme('#29ABDA');方法中调用createCard，如下所示。

注意：我无法看到您将动态div $cardDiv附加到文档的位置，我的意思是另一个现有的div或{{1} }。

工作body：

＆＃13;

snippet

＆＃13;

function cardScheme(color) {
    $('.card h3').css('color', color);
}

function createCard(id, title, note) {
        
    // Creates a main card div
        var $cardDiv = $('<div>', {
            class: 'col-md-12 card',
            "card-id": id
        });
    
        // h3 tag with title of note
        var $title = $('<h3>', {
            "data-toggle": 'modal',
            "data-target": '#update',
            click: function() {
                updateModal(id, title, note);
            }
        }).text(title);
    
        // Append to card
        $cardDiv.append($title);
  
        $('#container').append($cardDiv);
    
        cardScheme('#29ABDA');
}

setTimeout(function(){
  createCard('test', 'testTitle', 'test note');
}, 2000);  // after 2 seconds

＆＃13;

Answer 2

一旦加载DOM并准备使用，就应该添加JS代码。像这样 -

$(document).ready(function(){
    $('.card h3').css('color', color);
});

Answer 3

<table>
  <tr>
    <td>First TR</td>
  </tr>
  <tr>
    <td>Second TR</td>
  </tr>
  <tr>
    <td>Third TR</td>
  </tr>
  <tr>
    <td>Four TR</td>
  </tr>
  <tr>
    <td>Fifth TR</td>
  </tr>
</table>

通过jQuery更改动态创建元素的CSS

3 个答案: