Question

所以我将多个输入项水平对齐作为列表。我将它们的显示设置为无，然后，在单击其他元素时，它们都显示出来，但不是有序的水平列表，而是从上下颠倒的一行。

我该如何解决这个问题，所以在show（）项目会正常显示，如下所示：

*********
   ***

而不是一个长长的清单：

*
*
*
*

等...

我尝试使用$("input").attr("display", "flex")，但这并不起作用。相关代码：

input {
    display: none;
}


<input type="image" src="1\boy.png" id="kid" alt="שי גבע" />
<input type="image" src="1\boy1.png" id="kid"  alt="רונן חתואל"/>
<input type="image" src="1\girl.png" id="kid"  alt="חן דואק" />
<input type="image" src="1\boy3.png" id="kid"  alt="שימי לוי" />
<input type="image" src="1\boy2.png" id="kid"  alt="גיא מרוז" />
<input type="image" src="1\boy4.png" id="kid"  alt="אבי רון" />
<input type="image" src="1\girl8.png" id="kid"  alt="שמחה ריף" />
<input type="image" src="1\girl13.png" id="kid" alt="ברכה קצר" />
<input type="image" src="1\girl10.png" id="kid" alt="מורל מויאל" />
<input type="image" src="1\boy5.png" id="kid" alt="שמשון גיבור" />
<input type="image" src="1\boy6.png" id="kid" alt="איתי חיימוב" />
<input type="image" src="1\boy7.png" id="kid" alt="גרגורי קייקוב" />

$("#start").click(function() {
    $('input').show('slow');
    $("#start").hide();
});

感谢。

Answer 1

当你想从JS代码设置CSS规则时，你应该使用jQuery方法 css() ：

$("input").css("display","inline");

如果您只想显示点击的输入，则必须使用当前对象$(this)，如：

$(this).css("display","inline");

希望这有帮助。

$("#start").click(function() {
  $('input').css("display","inline");
});

input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="1\boy.png" id="kid" alt="שי גבע" />
<input type="image" src="1\boy1.png" id="kid"  alt="רונן חתואל"/>
<input type="image" src="1\girl.png" id="kid"  alt="חן דואק" />
<input type="image" src="1\boy3.png" id="kid"  alt="שימי לוי" />
<input type="image" src="1\boy2.png" id="kid"  alt="גיא מרוז" />
<input type="image" src="1\boy4.png" id="kid"  alt="אבי רון" />
<input type="image" src="1\girl8.png" id="kid"  alt="שמחה ריף" />
<input type="image" src="1\girl13.png" id="kid" alt="ברכה קצר" />
<input type="image" src="1\girl10.png" id="kid" alt="מורל מויאל" />
<input type="image" src="1\boy5.png" id="kid" alt="שמשון גיבור" />
<input type="image" src="1\boy6.png" id="kid" alt="איתי חיימוב" />
<input type="image" src="1\boy7.png" id="kid" alt="גרגורי קייקוב" />

<button id="start">start</button>

jQuery show（）后输入元素没有正确对齐

1 个答案: