1
私は、リストビューとグリッドビューの切り替え機能を持つオブジェクトのビューアを持っています。私はまた、ユーザーがグリッドビューを選択し、説明で35文字以上のユーザーが35文字しか表示されない場合、ユーザーがリストビューに戻るときに完全な説明に復帰したいと言う文を作成しました。あなたはそれに対してどんな解決策もありますか？クリック後のjQuery削除クラス
$(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>
元の 'description'をどこかに格納してロールバックする必要があります。 –
あなたはそれを見つける方法を知っていますか？ –
コンラッド、私の答えをチェックして、質問がある場合は教えてください。 – SeanKendle