표시 할 랜덤 p 태그

jQuery를 사용하여 수행 한 작업으로 되돌리려합니다. 대신 vanilla JS를 사용하고 싶습니다. 내가 성취하고자하는 것을 더 잘 이해하기 위해 작업 jQuery를 주석 처리했습니다.표시 할 랜덤 p 태그

var quotes = document.getElementsByClassName("quotes"); 

document.getElementById("generate").addEventListener("click", function (event) { 
    var random = Math.floor(Math.random() * quotes.length); 
    quotes.style.visibility = "hidden"; 
    quotes[random].style.visibility = "visible"; 
    //$('.quotes').hide().eq(random).show(); 
});

코드를 실행할 때 무작위 단락 태그를 표시하고 싶습니다. 어떤 도움이라도 대단히 감사 할 것입니다.

출처

2017-01-25 Joshua PP

quotes가 array-like 목적으로

var quotes = document.getElementsByClassName("quotes");

을 대체.

배열에서 각 루프를 반복하여 속성을 visibility으로 변경할 수 있습니다.

또한 루프 내에서 3 항 연산자를 사용하여 1 항목을 표시되도록 설정할 수 있습니다. 당신이 VanillaJS에 당신의 jQuery를 구현 한 후 당신이하지 visibility 변경해야 display 속성입니다 복사 할 경우

for(var i = 0; i < quotes.length; i++){ 
    quotes[i].style.visibility = (i==random) ? "visible" : "hidden"; 
}

는 엄밀히 말하면. 여기

for(var i = 0; i < quotes.length; i++){ 
    quotes[i].style.display = (i==random) ? "block" : "none"; 
}

근무 예 : 당신이 그것을 반복 할 필요가 있으므로 https://jsfiddle.net/1cog9t3c/1/

var quotes = document.getElementsByClassName("quotes"); 
 

 
document.getElementById("generate").addEventListener("click", function (event) { 
 
    var random = Math.floor(Math.random() * quotes.length); 
 
    for(var i = 0; i < quotes.length; i++){ 
 
     quotes[i].style.display = (i==random) ? "block" : "none"; 
 
    } 
 
});

<div class="quotes"> 
 
test 
 
</div> 
 
<div class="quotes"> 
 
test 2 
 
</div> 
 
<div class="quotes"> 
 
test 3 
 
</div> 
 

 
<button id="generate"> 
 
gen 
 
</button>

출처

2017-01-25 13:01:09 Curt

나는 응답이 깨끗한 발견했다. '= (i == random)에 대해 물어볼 수 있습니까? "차단": "없음"; ' 코드의 일부? 내 현재의 이해를 넘어서 ... 또한 감사합니다! –

@ JoshuaPP 그것은 삼항 연산자입니다 :). 그것은 기본적으로'if (i == random) {return "블록"; } else {return "none"; }' – Curt

정말 고마워! 그러나 현재 코드에서 선택한 견적을 참조해야하므로 약간 큰 문제가 발생합니다. 내 JS에서 임의로 선택하는 견적을 선택해야합니다. 내가 어떻게 할 수있는 아이디어? 그것에 대해 생각하면서 지출했지만 그것을 알아낼 수 없습니까? 그래도 별도의 게시물을받을 가치가 있습니다. 편집 :이를 달성하기 위해 클래스 블록이있는 p 태그를 선택할 방법을 찾아야 할 수도 있습니다 (특정 시간에 단락 만 사용). 이제는 코드가 작동하는 방식을 더 잘 시각화 할 수 있습니다. dev 도구의 동작을 살펴 보았습니다. –

style 속성이없는 따라서

var quotes=document.getelemetsByid("quotes").innerhtml;

출처

2017-01-25 12:59:24 Hacker

귀하의 quotes이 HTMLCollection입니다.

당신은 배열의 모든 요소에 함수를 호출하는 Array.prototype.forEach.call를 사용할 수 있습니다

var quotes = document.getElementsByClassName("quotes"); 
 

 
document.getElementById("generate").addEventListener("click", function(event) { 
 
    var random = Math.floor(Math.random() * quotes.length); 
 

 
    Array.prototype.forEach.call(quotes, function(quote) { 
 
     quote.style.visibility = "hidden"; 
 
    }); 
 
    
 
    quotes[random].style.visibility = "visible"; 
 
});

<div class="quotes">quote1</div> 
 
<div class="quotes">quote2</div> 
 
<div class="quotes">quote3</div> 
 
<div class="quotes">quote4</div> 
 

 
<div id="generate"> 
 
    Generate 
 
</div>

출처

2017-01-25 13:03:59

표시 할 랜덤 p 태그

답변

관련 문제