Question

我有9个几乎相同的点击句柄功能，唯一改变的是被点击的按钮的ID号，它具有不同的索引号。并且其对应的内容带有ID和唯一索引号。

当ID =＆＃34;但0＆＃34;的按钮时单击，ID =＆＃34; cont0＆＃34;然后通过css display：none; / display：block;显示。下面的代码片段中有3个这样的函数，但最终会有9个...但我知道有一种方法可以轻松地将这些函数组合成一个。

我附上了一些片段供您查看。

任何帮助都将不胜感激。

＆＃13;

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

＆＃13;

.content-wrap {
	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 {
	display: none;
}

＆＃13;

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

＆＃13;

Answer 1

您可以尝试以下方式：

export GITHUB_TOKEN=xyztoken

Answer 2

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

在更换功能的情况下尝试上述代码。这应该是你正在寻找的工作。 注意：确保＆＃34;，＆＃34;之间有空格。和＆＃34;＃＆＃34;对于每个ID。

Answer 3

向按钮添加数据属性

<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
});

将多个单击函数组合到一个函数中

3 个答案: