用jQuery替换相同结构中的不同单词

时间:2016-03-24 11:31:36

标签: javascript jquery text replace word

我在这里找到了一个用jQuery替换单个单词的解决方案。解决方案一般对我有用,但有可能缩短一点吗?这是代码:

$(document).ready(function() {
    $('.who').text(function(i, oldText) {
        return oldText === 'Dritter' ? 'Ich nehm die Nummer drei' : oldText;
    });
    $('.who').text(function(i, oldText) {
        return oldText === 'Fünfter' ? 'Ich nehm die Nummer 5' : oldText;
    });
    $('.groupheader').text(function(i, oldText) {
        return oldText === 'Sechster' ? 'i am number six' : oldText;
    });
});    

对于此div结构:

<div class="who">Erster</div>
<div class="who">Zweiter</div>
<div class="who">Dritter</div>
<div class="who">Vierter</div>
<div class="who">Fünfter</div>
<div class="who">Sechster</div>

2 个答案:

答案 0 :(得分:3)

您可以通过将所有替换置于对象中来缩短此位置,并通过要更改的文本进行键控。然后,您可以使用单行函数,将文本替换为对象中的值,如果找到则。

var substitutions = {
    'Dritter': 'Ich nehm die Nummer drei',
    'Fünfter': 'Ich nehm die Nummer 5',
    'Sechster': 'i am number six'
}

$('.who, .groupheader').text(function(i, oldText) {
    return substitutions[oldText] || oldText;
});

Working example

答案 1 :(得分:2)

您还可以使用三元运算符以这种方式缩短代码。

代码段:

$(document).ready(function() {
  $('.who,.groupheader').text(function(i, oldText) {
    return oldText === 'Dritter' ? 'Ich nehm die Nummer drei' : oldText === 'Fünfter' ? 'Ich nehm die Nummer 5' : oldText === 'Sechster' ? 'i am number six' : oldText;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="who">Erster</div>
<div class="who">Zweiter</div>
<div class="who">Dritter</div>
<div class="who">Vierter</div>
<div class="who">Fünfter</div>
<div class="who">Sechster</div>

FIDDLE DEMO