Question

我试图允许用户输入一个数字（即下面第一个div中的3），它将决定在输出中显示哪个div。我根据输入的数字创建了一个id（或者我认为）的数组。当我提醒数组时，id看起来是正确的，但出于某种原因，当我尝试在下面的函数中显示它时，没有任何反应。这与此帖非常相似：how to loop through an array of jquery objects and .hide() each of them但我无法重新创建它。任何帮助将不胜感激。这是一个小提琴：http://jsfiddle.net/dbeau79/4KzuN/

<div id="variable_1">3</div>

<div id="jinja_1" class="jinja">I'm Jinja 1</div>
<div id="jinja_2" class="jinja">I'm Jinja 2</div>
<div id="jinja_3" class="jinja">I'm Jinja 3</div>
<div id="jinja_4" class="jinja">I'm Jinja 4</div>
<div id="jinja_5" class="jinja">I'm Jinja 5</div>
<div id="jinja_6" class="jinja">I'm Jinja 6</div>    

$('.jinja').hide();    
var varStart = 1;
var varEnd = $('#variable_1').text();

var arr = [];

while (varStart <= varEnd) {
arr.push("'#jinja_" + varStart++ + "'");
}

$.each(arr, function () {
//alert(this);
$(this).show();
});

Answer 1

这可以解决您的问题：

<div id="variable_1">3</div>

<div id="jinja_1" class="jinja">I'm Jinja 1</div>
<div id="jinja_2" class="jinja">I'm Jinja 2</div>
<div id="jinja_3" class="jinja">I'm Jinja 3</div>
<div id="jinja_4" class="jinja">I'm Jinja 4</div>
<div id="jinja_5" class="jinja">I'm Jinja 5</div>
<div id="jinja_6" class="jinja">I'm Jinja 6</div>    

//$('.jinja').hide();    
var varStart = 1;
var varEnd = $('#variable_1').text();

var arr = [];

while (varStart <= varEnd) {
arr.push("#jinja_" + varStart++ + "");
}

$.each(arr, function (i, elem) {
//alert(this);
$(elem).show();
});

Answer 2

希望你想要这个：

var id = $('#variable_1').text();

$('[id*=jinja_]').hide();

// Step One
$('#jinja_' + id).show(function(){
    $(this).prevAll('div').show();
});

// Step Two
$('[id*=jinja_]').hide();
$('#jinja_' + id).show();
$('#jinja_' + id).prevAll('div').show();

取决于您喜欢使用哪一个。

JSFIDDLE

Answer 3

我会使用完全不同的方法：http://jsfiddle.net/4KzuN/13/

<input type="number" value="3">

<ul>
    <li>I'm jinja 1</li>
    <li>I'm jinja 2</li>
    <li>I'm jinja 3</li>
    <li>I'm jinja 4</li>
    <li>I'm jinja 5</li>
</ul>

<script>
    $('input').on('keyup', function() {
        $('li').hide();
        $('li').eq(parseInt($(this).val(), 10) - 1).show();
    }).keyup();
</script>

Answer 4

只是一种不同的方法 - FIDDLE - 并不比另一种更好。在旧版浏览器中可能有限。

CSS

.jinja {
    display: none;
}

JS

var mynumber = +$('#variable_1').html() + 1;

$('.jinja:nth-child('+ mynumber +')').css('display', 'block');

jQuery在数组中创建id

4 个答案: