클릭 div에 JQuery 적용

개별 div의 각 번호로 번호 목록을 만드는 중입니다. 지금까지 나는 Javascript (클릭)를 사용하여 div를 제거 할 수 있었지만 JQuery를 활성화하여 div에 클래스를 추가 한 다음 해당 클래스의 모든 div를 버튼 등으로 제거 할 수있게하려고합니다. . 클릭 div에 JQuery 적용

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=203"> 
<title>Lista Mundial</title> 

<style> 
    .divContainer { 
     width: 35px; 
     height: 25px; 
     border: solid 1px #c0c0c0; 
     background-color: #e1e1e1; 
     font-family: verdana; 
     float: left; 
    } 
    .text { 
     font-size: 15px; 
     font-family: verdana; 
     color: black; 
     margin-top: 4px; 
    } 
    h4 { 
     font-family: Verdana; 
     color: black; 
     text-decoration: none; 
    } 
</style> 

</head> 
<body> 
<h4>Double click para borrar un numero</h4> 
<script type="text/javascript"> 
    for(var i = 1; i <= 639; i++){ 
     var divTag = document.createElement("div"); 
     divTag.id = i; 
     divTag.className = "divContainer"; 
     document.body.appendChild(divTag); 
     divTag.ondblclick = function(){this.parentNode.removeChild(this)}; 
     var pTg = document.createElement("p"); 
     pTg.setAttribute("align", "center"); 
     pTg.className = "text"; 
     pTg.innerHTML = (i); 
     document.getElementById(i).appendChild(pTg); 
    } 
</script> 
</body> 
</html>

편의상

http://jsfiddle.net/ramonfabrega/AZSy8/

, 방금의 클릭 사업부를 숨기고했지만, JQuery와는 작동하지 않습니다. 그래서 뭔가가 꺼져 있어야합니다.

출처

2014-04-04 Ramon F

두 가지 문제 :

1) jQuery가로드되지 않았습니다.
2) 대신 div의 잘못된 selector (divTag)

에 클릭 이벤트를 결합하려고했던 다음은 업데이트 된 바이올린의 : http://jsfiddle.net/LFC3A/2/

# 2에 대해서 - jQuery를 사용하면 요소를 여러 가지 방법을 선택할 수 있습니다. 가장 일반적인 방법은 selector입니다. 선택기의 대부분의 jQuery 지원하는 CSS 1입니다 - jQuery를 자체 사용자 정의 선택기의 일부를 지원하지만, 3 (예 : div:eq, div:gt, 등등 ...) 여기에 선택기 페이지 체크 아웃 : 지금 http://api.jquery.com/category/selectors/

을, 마크 업이 :

<body> 
    <divTag>My Custom Div Tag</divTag> 
    <div>My regular DIV</div> 
</body>

원래 피들이가 작동했을 것입니다. 실제로, 다음을 보여주는 업데이트 된 바이올린이 있습니다 : http://jsfiddle.net/FpMAw/ (사용자 정의 요소를 반환하도록 createElement를 업데이트했습니다.)

다른 방법으로 jQuery에 액세스하려면 DOM 요소를 전달해야합니다. 같은 뭔가 : 당신은 지금 유용한 헬퍼 메소드의 무리와 함께 jQuery를 개체가 있음을 참조하는 경우

var $body = $(document.body)는 var $body = $('body')

에 해당합니다. 따라서, 위의 예에서 우리가 지금 할 수있는 :

$body.css('color', 'red')

는 희망이 작동하지 않은 이유를 좀 더 설명하는 데 도움이됩니다.다른 문의 사항이있는 경우, 당신은 바이올린에 jQuery 라이브러리

enter image description here

변화 $('divTag')$('div')

에 포함되지 않습니다 :)

출처

2014-04-04 04:24:12 Jack

그래도 좋았지 만 올바르지 않은 부분을 알 수 있습니까? 나는 최근에 CodeHS와 Codecademy를 통해 코딩을 시작 했으므로 배워야 할 것입니다. –

안녕하세요 @ user3495678 - 원래 코드가 작동하지 않는 이유를 설명하기 위해 내 대답이 업데이트되었습니다. 희망적으로 도움이됩니다! 자바 스크립트를 재미있게 배워보세요. – Jack

Fiddle Demo

을 물어 주시기 바랍니다 읽기 $("element")

Start Learning

jQuery API Documentation

출처

2014-04-04 04:25:26

감사합니다. 도움을 감사하십시오 –

@ user3495678 다행히 도왔습니다 :) –

$(document).ready(function() { 
    $('div').click(function() { 
     $(this).hide(); 
    }); 
});

이 작성하고 동시에 클릭 핸들러를 추가합니다.

$('<div>').click(function(e){ this.addClass('active');})

출처

2014-04-04 04:28:57

클릭 div에 JQuery 적용

답변

관련 문제