为啥 jQuery 选择器在这里不起作用?

Posted

技术标签:

【中文标题】为啥 jQuery 选择器在这里不起作用?【英文标题】:Why is the jQuery selector not working here?为什么 jQuery 选择器在这里不起作用? 【发布时间】:2020-05-10 22:39:59 【问题描述】:

我想知道为什么在创建英雄后尝试更新表格单元格时,id 的 jQuery 选择器在这里不起作用。我正在使用一个基本的 jQuery 选择器,但即使使用 innerhtml 它也不做任何事情。 jQuery 选择器正在处理输入获取值函数,但在那之后就没有了,这对我来说毫无意义,控制台绝对不会给我任何错误。

HTML

<div class="col-4 hero">
    <h2>Votre personnage</h2>
    <div>
        <h3>Créer un nouveau personnage</h3>
        <p class="alert alert-danger" role="alert">Attention ! créer un nouveau personnage supprimera tout de l'ancien.</p>
        <label>Nom</label>
        <input type="text" id="hero_name_input" name="hero_name_input">
        <button>Créer personnage</button>
    </div>
    <div>
        <h3>Les statistiques de votre personnage</h3>
        <table>
            <tr>
                <th>Nom</th>
                <td id="Hname"></td>
            </tr>
            <tr>
                <th>Habilité</th>
                <td id="Hskill"></td>
            </tr>
            <tr>
                <th>Endurance</th>
                <td id="Hstamina"></td>
            </tr>
            <tr>
                <th>Chance</th>
                <td id="Hluck"></td>
            </tr>
        </table>
    </div>
</div>

JS

$(document).ready(function() 

    $('.hero button').click( function create_hero() 
        let nom       = $('#hero_name_input').val(); // it works
        let habilite  = (roll_dice(1)+6);
        let endurance = (roll_dice(2)+12);
        let chance    = (roll_dice(1)+6);

        let hero = new Hero (nom, habilite, endurance, chance);
        //document.getElementById('Hname').innerHTML = hero.nom; // it works

        // not working block
        $('#Hname').html     = hero.nom;
        $('#Hskill').html    = hero.habilite.toString();
        $('#Hstamina').html   = hero.endurance.toString();
        $('#Hluck').html     = hero.chance.toString();
        // not working block
    );

    function roll_dice (dices) 
        if (dices == 1) 
            return Math.floor(Math.random()*6+1)
        
        else 
            let d1 = Math.floor(Math.random()*6+1)
            let d2 = Math.floor(Math.random()*6+1)
            let dices_result = d1+d2;
            return dices_result;
        
    
);

【问题讨论】:

html() 是一种方法,而不是属性。请参阅文档:api.jquery.com/html 【参考方案1】:
$('#Hname').html(hero.nom);

这是使用jQuery的.html()函数的正确方法。

jQuery html() docs

【讨论】:

【参考方案2】:

在jQuery中,html是一个函数,所以必须使用$('#Hname').html( hero.nom )

【讨论】:

以上是关于为啥 jQuery 选择器在这里不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 jQuery :not() 选择器在 CSS 中不起作用?

为啥 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用?

JQuery UI 日期选择器在 Chrome 中不起作用

jQuery 的选择器在 iframe 中不起作用

jQuery $(this) 选择器在函数中不起作用

jQuery 属性选择器在 Internet Explorer 中不起作用