여러 클릭 기능을 하나의 기능으로 결합

Question

9 개의 클릭 핸들 기능이 거의 동일합니다. 유일한 변경 사항은 다른 인덱스 번호가있는 클릭 된 버튼의 ID 번호입니다. ID 및 고유 색인 번호가있는 해당 콘텐츠

ID가 "but0"인 버튼을 클릭하면 ID가 "cont0"인 콘텐츠가 css display : none;/display : block;을 통해 표시됩니다. 아래 코드 스 니펫에는 3 가지 기능이 있지만 결국에는 9 가지 기능이 있습니다. 그러나 기능을 쉽게 하나로 결합하는 방법이 있습니다.

나는 당신이 볼 수 있도록 일부 발췌 문장을 첨부했습니다.

도움을 주시면 감사하겠습니다.

$.ajax({ 
 
    type: 'GET', 
 
    url: 'data.json', 
 
    data: { get_param: 'value' }, 
 
    dataType: 'json', 
 
    success: function (data) { 
 
     
 
     $.each(data, function(i) { 
 
      var link = $('.more-link'); 
 

 
      var cont = "<div class='content' id ='cont" + i + "'>" + data[i].content + "</div>"; 
 
      
 
      var back = "<a class='back' href='http://localhost:8888/postPopulate/Feb22.9.53AM/'>BACK</a>"; 
 
      
 
      var thumb = "<img class='thumb' src=" + data[i].thumbnail + ">"; 
 
      
 
      var title = "<h1 class='title'>" + data[i].title + "</h1>"; 
 
      
 
      var exc = "<p class='excerpt'>" + data[i].excerpt + "</p>"; 
 
      
 
      var click = "<a class='click' href='" + data[i].permalink + "'" + " id ='" + "but" + i + "'>" + "Read More</a>"; 
 
      
 
      $('.content-thumb').append(title); 
 
      $('.content-thumb').append(thumb); 
 
      $('.content-thumb').append(exc); 
 
      $('.content-thumb').append(click); 
 
      
 
      $('body').append(cont); 
 
      
 
      $('#but0').click(function(){ 
 
       $('#cont0').css('display', 'block'); 
 
       $('.content').append(back); 
 
       $('.content-thumb').css('display','none'); 
 
      }); 
 
      
 
      $('#but1').click(function(){ 
 
       $('#cont1').css('display', 'block'); 
 
       $('.content').append(back); 
 
       $('.content-thumb').css('display','none'); 
 
      }); 
 
      
 
      $('#but2').click(function(){ 
 
       $('#cont2').css('display', 'block'); 
 
       $('.content').append(back); 
 
       $('.content-thumb').css('display','none'); 
 
      }); 
 
       
 

 
     });//END OF FOR LOOP 
 
     
 
     $.each(data, function(i){ 
 
      
 
     var link = $('.click'); 
 
     var perma = JSON.stringify(data[i].permalink); 
 
//  var pArray = [i]; 
 
      
 
       perma = JSON.parse(perma); 
 
       perma = perma.replace("http://www.capetownetc.com/blog/", ""); 
 
       perma = perma.replace("http://www.capetownetc.com/events/", ""); 
 
       perma = perma.replace("http://www.capetownetc.com/mykitchen/", ""); 
 

 
//   pArray.push(perma); 
 
      
 
      $(link).attr("href", "http://localhost:8888/postPopulate/Feb22.9.53AM/#"); 
 
      
 
      }); 
 
    }//END OF SUCCESS FUNC 
 
});//END OF AJAX 
 

 
//SNIPPETS 
 

 
//console.log(element.id); 
 

 

 
//var link = ('.more-link'); 
 
//var title = "<h1 class='title'>" + data[0].title + "</h1>"; 
 
//   var thumb = "<img class='thumb' src=" + data[0].thumbnail + ">"; 
 
//var exc = "<p class='excerpt'>" + data[0].excerpt + "</p>";    
 
//   $('.thumbnail').click(function(){ 
 
//    $('body').html(title); 
 
//    $('body').append(thumb); 
 
//    $('body').append(exc); 
 
//    $(link).attr("href", "http://localhost:8888/Practice1/Task1-Feb17/#"); 
 
//   }); 
 

 

 
//var cont = "<div class='content'>" + data[4].content + "</div>"; 
 
//    
 
//   $('body').html(cont);

.content-wrap { 
 
\t display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.title{ 
 
    display: table; 
 
    margin: 0 auto; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    color: #398d46; 
 
} 
 

 
strong{ 
 
    display: block; 
 
} 
 

 
.content{ 
 
    margin-top: 20px; 
 
    font-family: sans-serif; 
 
    color: #333; 
 
} 
 

 
.thumb{ 
 
    display: block; 
 
    margin: 20px auto; 
 
    height: auto; 
 
} 
 

 
.excerpt{ 
 
    font-family: sans-serif; 
 
    color: #333; 
 
    text-align: justify; 
 
} 
 

 
.back{ 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    color: darkred; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 10px; 
 
} 
 

 
.more-link{ 
 
    display: none; 
 
} 
 

 
.content { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rugby Thumbnails</title> 
 
    <link href="css/styles.css" rel="stylesheet"> 
 
    <script src="js/jquery.min.js"></script> 
 
</head> 
 
    
 
<body> 
 
    <div class="content-thumb"> 
 
    
 
    </div> 
 

 
    <script src="js/main2.js"></script> 
 
    <script src="js/arrayTest.js"></script> 
 
</body> 
 
</html>

Answer 1

아래, 단지 만들

<a class='click' href='...' id='...' data-id=' id '>" + "Read More</a>" 

다음 답변에 의해 주어진이 작업을 수행하는 방법

$('.click').click(function(){ 
    var index = $(this).data("id"); 
    $('#cont' + index).css('display', 'block'); 
    // other things to execute 
}); 

Answer 2

당신은 같은 것을 시도 할 수 :

$('button').click(function() { 
    var id = $(this).attr('id'); 
    // .. Do something according to the id you get. 
}); 

Answer 3

$('#but0, #but1, #but2').on('click', some_function); 

교체하여 기능을 위의 코드를 시도합니다. 이것은 당신이 찾고있는 일을해야합니다. 참고 : 모든 ID에 대해 ","및 "#"사이에 공백이 있어야합니다.