Question

我想简化这个javascript代码，但我没有能力这样做，请帮助我，我会非常感谢，非常感谢你！

$(function() {
    $("#show1").click(function() {
        $("#showmore1").toggle();
    })
    $("#show2").click(function() {
        $("#showmore2").toggle();
    })
    $("#show3").click(function() {
        $("#showmore3").toggle();
    })
})

[2016/05/24]这是我的完整代码，https://jsfiddle.net/o970b9cn/ 对不起我遗漏的信息。我想展示很多评论，但是当用户点击按钮时，它会首先隐藏完整的信息，以启动全文。

我昨天尝试了下面的答案，但它仍然无法运行...对不起我的能力不足......

Answer 1

为每个“show<your_id>”提供公共课程。例如showmore
为您的元素提供一些属性，例如data-showid，其中包含切换元素的ID。
对于“showmore”课程，请点击功能

喜欢这个

<a id="show1" class="showmore" data-showid="showmore1" >show more</a>
<a id="show2" class="showmore" data-showid="showmore2" >show more</a>
<a id="show3" class="showmore" data-showid="showmore3" >show more</a>

<script>
    $(function() {
        $(".showmore").click(function() {
            var this_button = $(this);
            $("#"+this_button.attr("data-showid")).toggle();
        })
    })
</script>

Answer 2

你可以使用$q.all，只需要在每个具有相同属性的元素上迭代函数，在这种情况下我们将使用class，因为id应该是唯一的。

我们将为每个容器（var app = angular.module('bookingApp', ['ui.bootstrap']); app.filter('startFrom', function() { return function(input, start) { if (input) { start = +start; //parse to int return input.slice(start); } return []; } }); app.controller('bookingCtrl', function($scope, $http, $timeout) { $scope.init = function() { $q.all([$http({ method: 'get', url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php', data: $.param({ 'search': '' }), headers: { 'Content-Type': 'application/json; charset=utf-8' } }), $http({ method: 'get', url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php', data: $.param({ 'search': '' }), headers: { 'Content-Type': 'application/json; charset=utf-8' } }) ]).then(function(response) { $scope.myConcatenatedData = response[0].concat(response[1]); console.log(myConcatenatedData); }) }; }); ...）提供一个#show1 #show2此类节目并制作此功能each

class

如果容器中有多个div，则可以使用https://jsfiddle.net/sL3qk853/（$('.show').each(function (index, elem) { $(elem).on('click', function () { $(this).find('div[id^="showmore"]').toggle(); }); });）和begin with selector指定所选div，或者只使用find您有一个div或想要在div[attribute^="something"]容器div内的所有.show上进行此操作。

修改：而不是使用课程和$(this).children().toggle();你可以这样做

＆＃13;

each

＆＃13;

$('div[id^="showCont"]').on('click', function () {
   $(this).children().toggle();
});

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin: 1px;
  float: left
}

div[id^="showmore"] {
  background-color: #3498db;
  float: left
}

＆＃13;

Answer 3

使用Attribute Starts With Selector [name^=”value”]

选择具有指定attribute的元素，其值beginning与给定字符串完全相同。

$(function() {
  $("a[id^='show']").click(function() {
    $(this).prev('div').find('span[id^="showmore"]').toggle();
  });
});

＆＃13;

$(function() {
  $("a[id^='show']").click(function() {
    $(this).prev('div').find('span[id^="showmore"]').toggle();
  });
});

＆＃13;

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/css?family=Nunito:300);
 *,
html,
body {
  /*font-family: 'Noto Sans TC', 'Nunito', sans-serif;
	font-weight: 300;*/
  font-family: 'cwTeXYen', 'Nunito', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  letter-spacing: .2pt;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore1" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show1" style="display: block; margin: 5px 0;">(read more)</a>
</div>

<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore2" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show2" style="display: block; margin: 5px 0;">(read more)</a>
</div>

<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore3" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show3" style="display: block; margin: 5px 0;">(read more)</a>
</div>

＆＃13;

如何简化下面的代码？

3 个答案:

Fiddle Demo