Question

我有一个页面可以从测验中获得分数。我想在分数旁边轻松显示响应文本。当只显示一个分数时，我已经设法轻松完成此操作，但我的用户有一个多分数的仪表板，我想为每个分数显示此响应文本，但我无法让它工作。我试过（找到），（最接近），（上）和其他人。这是我得到的：

HTML

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>1</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>2</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>3</em> points.</div>
</div>

<div class="content">
    <div class="quiz_score_response">response</div>
    <div class="quiz_score_possible">You got <em>4</em> points.</div>
</div>

和JS

$(".quiz_score_possible em").each(function(){

    if ($(this).is(":contains('1')")) {$(this).closest(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).closest(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).closest(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).closest(".quiz_score_response").text("You're Awesome");}

});

我的jsfiddle http://jsfiddle.net/9FvM8/3/

Answer 1

正如你得到的数字一样，你可以将响应保存在一个数组中，然后采用相反的方式，从你要更改的文本元素开始，并在text的回调中获取号码和匹配的响应

var arr = ["", "You Suck", "You're OK", "You're Good", "You're Awesome"];

$(".quiz_score_response").text(function() {
    return arr[+$(this).next('div').find('em').text()];
});

FIDDLE

Answer 2

当然你不能这样做，你应该使用

$(this).parent().siblings(".quiz_score_response");

所以代码会像

$(".quiz_score_possible em").each(function(){  
    if ($(this).is(":contains('1')")) {$(this).parent().siblings(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().siblings(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().siblings(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().siblings(".quiz_score_response").text("You're Awesome");}

});

Answer 3

$(".quiz_score_possible > em").each(function(){        
    if ($(this).is(":contains('1')")) {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().parent().find(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Awesome");}  
});

演示：

http://jsfiddle.net/z2vDm/

Answer 4

$(".quiz_score_possible em").each(function(){
    if ($(this).is(":contains('1')")) {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}
    if ($(this).is(":contains('2')")) {$(this).parent().parent().find(".quiz_score_response").text("You're OK");}
    if ($(this).is(":contains('3')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Good");}
    if ($(this).is(":contains('4')")) {$(this).parent().parent().find(".quiz_score_response").text("You're Awesome");}
});

Answer 5

替换：

if ($(this).is(":contains('1')")) {$(this).closest(".quiz_score_response").text("You're OK");}

with：

if ($(this).is(":contains('1')")){$(this).parent().parent().find(".quiz_score_response").text("You Suck");}

或更好：

if ($(this).text() == '1') {$(this).parent().parent().find(".quiz_score_response").text("You Suck");}

使用与text（）完全匹配将使代码更有效，因为将来用户点将是多个数字的组合而不是一个。

Update JS Fiddle

从jQuery中的每个函数中查找最接近的元素

5 个答案: