複数のクリック機能を1つの機能にまとめる

Question

私は9つのクリック操作機能がほとんど同じですが、変更されるのはクリックされたボタンのID番号が異なるインデックス番号だけです。 IDと一意のインデックス番号を持つ対応するコンテンツ。

ID = "but0"のボタンをクリックすると、ID = "cont0"のコンテンツがcss display：none;/display：block;で表示されます。以下のコードスニペットには3つの関数がありますが、最終的には9となります...しかし、関数を1つに簡単に結合する方法があることはわかっています。

私はあなたに見えるようにいくつかのスニペットを添付しました。

ご協力いただければ幸いです。

$.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

は、ちょうどあなたが渡していることを確認し、これは以下の回答で与えないための方法の

$('.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ごとに "、"と "＃"の間にスペースを入れてください。