Question

这段代码按原样运行，但我正在寻找一种更有效的方法来编写这个jquery代码。代码的目标，当选择（单击）一个节目时，显示div将在单击下一个节目时显示节目详细信息，它将替换显示div中先前所选节目的详细信息。

在这里输入代码

/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
    "use strict"; 
    $('#shows_morning_news').click(function () {
    $('#shows_info_display').html($('#display_morning_news').html());
    });
    $('#shows_danielle_smith').click(function () {
    $('#shows_info_display').html($('#display_danielle_smith').html());
    });
    $('#shows_rob_breakenridge').click(function () {
    $('#shows_info_display').html($('#display_rob_breakenridge').html());
    });
    $('#shows_calgary_today').click(function () {
    $('#shows_info_display').html($('#display_calgary_today').html());
    });
    $('#shows_sports_talk').click(function () {
    $('#shows_info_display').html($('#display_sports_talk').html());
    });
    $('#shows_charles_adler').click(function () {
    $('#shows_info_display').html($('#display_charles_adler').html());
    });
});

Answer 1

你可以试试这个：

/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function() {
  "use strict";
  [
    "morning_news",
    "danielle_smith",
    "rob_breakenridge",
    "calgary_today",
    "sports_talk",
    "charles_adler"
  ].map(function(id) {
    $("#shows_" + id).click(function() {
      $("#shows_info_display").html($("#display_" + id).html());
    });
  });
});

<强> CodePen Demo

Answer 2

您可以使用当前的id值来实现它。请检查以下代码。

$(document).on("click",function(){
    var id = $(this).attr("id");
    if(id.search("shows") == 0){
        var requiredIdPart = id.replace("shows","");
        $("#shows_info_display").html($("#display"+requiredIdPart).html());
    }
});

寻找一种更有效的方式来编写这个jquery

2 个答案: