Question

我有一个具有列表视图和网格视图切换器的对象查看器。我还做了if语句，当用户选择网格视图并且在描述中超过35个字符时，用户只能看到35个字符，但当用户返回列表视图时，我希望它回到完整描述。你能解决这个问题吗？

$(document).ready(function() {
  $("a.switcher").bind("click", function(event) {
    event.preventDefault();

    var mainId = $(this).attr("id");
    var classNames = $(this).attr('class').split(' ');
    var companyView = $("ul#company");
    var linkList = $('span#link-list');
    var gridDescription = $('span.description');
    var listDescription = $('span.meta');

    if (mainId == "gridview") {
      $(this).addClass("active");
      $("#listview").removeClass("active");

      companyView.removeClass("list");
      companyView.addClass("grid col-xs-12");
      linkList.addClass("links-position");

      gridDescription.addClass('.restrict');
      var txt = $('.description').text();

      if (txt.length > 35 && mainId == "gridview") {
        $('.description').html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
      }
      
      $(".morelink").click(function(event) {
        event.preventDefault();

        $("#gridview").removeClass("active");
        $("#listview").addClass("active");

        companyView.removeClass("grid col-xs-12");
        companyView.addClass("list");
        linkList.removeClass("links-position");
      });
    } else if (mainId == "listview") {
      $(this).addClass("active");
      $("#gridview").removeClass("active");
      companyView.removeClass("grid col-xs-12");
      companyView.addClass("list");
      linkList.removeClass("links-position");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  padding-bottom: 25px;
}

img {
  border: 0;
}

p {
  font-size: 1.2em;
  line-height: 1.3em;
  margin-bottom: 10px;
}

#wrap {
  margin: 0 auto;
  border-radius: 7px;
}

#wrap header {
  border-bottom: 1px solid white;
  margin-bottom: 35px;
  padding-top: 20px;
  position: relative;
}

#wrap header .list-style-buttons {
  color: red;
  position: absolute;
  right: 0;
}

.switcher {
  color: red;
}

.switcher:active {
  color: #da1d15;
}

.switcher:visited {
  color: #da1d15;
}

ul.list {
  margin-bottom: 20px;
  list-style: none;
  width: 100%;
}

ul.list li {
  margin-bottom: 20px;
  display: block;
}

ul.list li section.left {
  margin: 10px;
  display: block;
  float: left;
  position: relative;
  padding-left: 20px;
}

ul.list li .meta {
  display: block;
}

ul.list li .links {
  display: inline;
}

ul.list li .secondOffer {
  margin-left: 20px;
}

ul.list li section.left img.thumb {
  margin: 10px;
  height: 150px;
  width: 300px;
  float: right;
}

ul.list li section.left h3 {
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.4em;
}

ul.list section.left {
  padding: 20px;
}

ul.grid {
  list-style: none;
  margin: 0 auto;
}

ul.grid li section.left img.thumb {
  height: 150px;
  width: 300px;
  position: relative;
}

ul.grid li {
  display: block;
  float: left;
  width: 270px;
  height: 150px;
  padding: 5px 30px;
  margin-bottom: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

ul.grid li section.left {
  padding: 10px;
}

ul.grid section.left {
  position: relative;
  height: 400px;
}

.links-position {
  position: absolute;
  bottom: 0;
}

ul.grid li.clearfix {
  margin-bottom: 300px;
}

ul.grid li section.left h3 {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.2em;
  line-height: 1.5em;
}

ul.grid li .meta {
  display: block;
}

ul.grid li .address {
  position: relative;
}

ul.grid li .description {
  position: absolute;
}

ul.grid li .links {
  padding-left: 20px;
}

ul.grid .clearfix {
  padding: 10px;
}

.clearfix {}

section.left {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

section.left:hover {
  -webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
  -moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
  box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}

a:link {
  color: red;
  text-decoration: none;
}

a.links:visited {
  color: red;
  text-decoration: none;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" class="col-xs-12">
  <header>
    <span class="list-style-buttons">
      <a href="#" id="listview" class="switcher"><i class="fa fa-2x fa-th-list"></i></a>
      <a href="#" id="gridview" class="switcher active"><i class="fa fa-2x fa-th"></i></a>
    </span>
  </header>
  <ul id="company" class="list clearfix">
    <li class="clearfix alt">
      <section class="left">
        <img src="" alt="company image" class="thumb">
        <a href="">
          <h3>Name</h3>
        </a>
        <span class="meta address"><strong>Address: </strong></span>
        <span class="meta description">
          DESCRIPTION DESCRIPTION 
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION 
        </span>
        <span id="link-list">
          <a href="" class="links">
            <i class="fa fa-id-card-o"></i>
            Users: 
          </a>
          <a href="" class="links secondOffer">
           <i class="fa fa-database"></i> 
           Offers: 
          </a>
       </span>
      </section>
    </li>
  </ul>
</div>

Answer 1

当你在网格视图中时，可以使用css text-overflow: clip来剪辑任何不适合你元素的文本。

选项还包括：

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

来自：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

如果我理解你的问题，你想在每次点击按钮时切换两类，所以我打算使用.toggleClass()。

Answer 3

您可以将大量内容存储在jQuery的data存储中（与HTML5 data属性对齐，但不直接连接）。< / p>

＆＃13;

$(document).ready(function () {
        //`bind` is deprecated, use `on`:
        $("a.switcher").on("click", function (event) {
            event.preventDefault();

            var mainId = $(this).attr("id");
            var classNames = $(this).attr('class').split(' ');
            var companyView = $("ul#company");
            var linkList = $('span#link-list');
            var gridDescription = $('span.description');
            var listDescription = $('span.meta');

            if (mainId == "gridview") {

                $(this).addClass("active");

                $("#listview").removeClass("active");

                companyView.removeClass("list");
                companyView.addClass("grid col-xs-12");
                linkList.addClass("links-position");

                gridDescription.addClass('.restrict');
                
                //store local description:
                var $description = $(".description");

                $.each($description, function(i, e){
					var $thisDesc = $(this);
					var txt = $thisDesc.text();
					$thisDesc.data("full-desc", txt);
		
					if (txt.length > 35 && mainId == "gridview") {                    
						$thisDesc.html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
					}
				});

                //the .morelink a tag is being generated, you were trying to assign a listener *to that link*, but it doesn't exist yet, instead add a listener to a parent element that *will exist* on page load:
                $("#company").on("click", ".morelink", function (event) {
                    event.preventDefault();
                    
                    $("#gridview").removeClass("active");
                    $("#listview").addClass("active");
                    
                    //is this where you want to restore the full description?  Whenever you want, you can then pull the full description from the data-full-desc field, like this:
                    var $description = $(this).parents("li").find(".description");
                    $description.html($description.data("full-desc"));
                    
                    companyView.removeClass("grid col-xs-12");
                    companyView.addClass("list");
                    linkList.removeClass("links-position");
                });


            } else if (mainId == "listview") {

                $(this).addClass("active");


                $("#gridview").removeClass("active");

                companyView.removeClass("grid col-xs-12");
                companyView.addClass("list");
                linkList.removeClass("links-position");

                //restore descriptions:
                $.each($(".description"), function(i, e){
                    if(!!$(this).data("full-desc"))
   						    $(this).html($(this).data("full-desc"));
				});
            }

        });
    });

＆＃13;

 * {
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    padding-bottom: 25px;
}

img {
    border: 0;
}

p {
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 10px;
}



#wrap {
    margin: 0 auto;
    border-radius: 7px;
}

#wrap header {
    border-bottom: 1px solid white;
    margin-bottom: 35px;
    padding-top: 20px;
    position: relative;
}

#wrap header .list-style-buttons {
    color: red;
    position: absolute;
    right: 0;
}

.switcher {
    color: red;
}

.switcher:active {
    color: #da1d15;
}

.switcher:visited {
    color: #da1d15;
}


ul.list {
    margin-bottom: 20px;
    list-style: none;
    width: 100%;
}

ul.list li {
    margin-bottom: 20px;
    display: block;
}

ul.list li section.left {
    margin: 10px;
    display: block;
    float: left;
    position: relative;
    padding-left: 20px;
}

ul.list li .meta {
    display: block;

}

ul.list li .links {
    display: inline;
}

ul.list li .secondOffer {
    margin-left: 20px;
}

ul.list li section.left img.thumb {
    margin: 10px;
    height: 150px;
    width: 300px;
    float: right;
}

ul.list li section.left h3 {
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.4em;
}

ul.list section.left {
    padding: 20px;
}


ul.grid {
    list-style: none;
    margin: 0 auto;
}

ul.grid li section.left img.thumb {
    height: 150px;
    width: 300px;
    position: relative;
}

ul.grid li {
    display: block;
    float: left;
    width: 270px;
    height: 150px;
    padding: 5px 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

ul.grid li section.left {
    padding: 10px;
}

ul.grid section.left {
    position: relative;
    height: 400px;
}

.links-position {
    position: absolute;
    bottom: 0;
}

ul.grid li.clearfix {
    margin-bottom: 300px;
}

ul.grid li section.left h3 {
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1.5em;
}

ul.grid li .meta {
    display: block;
}

ul.grid li .address {
    position: relative;
}

ul.grid li .description {
    position: absolute;
}

ul.grid li .links {
    padding-left: 20px;
}

ul.grid .clearfix {
    padding: 10px;
}

.clearfix {
}

section.left {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

section.left:hover {
    -webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
    -moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
    box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}


a:link {
    color: red;
    text-decoration: none;
}

a.links:visited {
    color: red;
    text-decoration: none;
}

a.morelink {
    text-decoration: none;
    outline: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<div id="wrap" class="col-xs-12">
    <header>
            <span class="list-style-buttons">
                <a href="#" id="listview" class="switcher"><i class="fa fa-2x fa-th-list"></i></a>
                <a href="#" id="gridview" class="switcher active"><i class="fa fa-2x fa-th"></i></a>
            </span>
    </header>
    <ul id="company" class="list clearfix">

            <li class="clearfix alt">
                <section class="left">
                    <img src="" alt="company image" class="thumb">
                    <a href="#">
                        <h3>Name</h3></a>
                    <span class="meta address"><strong>Address: </strong></span>
                    <span class="meta description">DESCRIPTION DESCRIPTION 
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
 DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
 DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
 DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION 
                    </span>
                    <span id="link-list">
                    <a href=""
                       class="links"><i class="fa fa-id-card-o"></i>
                        Users: </a>

                    <a href="" class="links secondOffer"><i class="fa fa-database"></i> Offers: </a>
                </span>
                </section>
            </li>
    </ul>
</div>

＆＃13;

jQuery的数据功能：https://api.jquery.com/data/

.data（）方法允许我们将任何类型的数据附加到DOM 元素以一种不受循环引用安全的方式，因此从内存泄漏。

单击后jQuery删除类

3 个答案: