使用js向元素添加宽度

奥米德·巴赫希（Omid Bakhshi）

我想用js在HTML中的某些元素上增加宽度，但不能正常工作。
我想在响应式设计中做到这一点。
我试图用这段代码来做到这一点，但它不起作用。在响应式设计中，所有事物都混合在一起。

<script>
    $(document).ready(function (e) {

        $('.seat-ready').click(function (e) {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }

        });
    });
    setTimeout(function () {
        $('.chairs .row').each(function () {
            $(this).width(
                ($(this).children('a').length)
                *
                (
                    $(this).children('a').width() +
                    parseInt($(this).children('a').css("marginRight").replace('px', ''))
                    + parseInt($(this).children('a').css("marginLeft").replace('px', ''))
                )
                + $(this).attr('class').split('-')[1] * $(this).children('a').width()
            );
            $(this).width(
    	            ($(this).children('span').length)
    	            *
    	            (
    	                $(this).children('span').width() +
    	                parseInt($(this).children('span').css("marginRight").replace('px', ''))
    	                + parseInt($(this).children('span').css("marginLeft").replace('px', ''))
    	            )
    	            + $(this).attr('class').split('-')[1] * $(this).children('span').width()
    	        );
        });
        $('.chairs').each(function () {
            var rowLength = $(this).children('.row').length;
            for (var i = rowLength; i > rowLength - 12; i--) {
                $(this).children('.row').eq(i).addClass('top');
            }
        });
    }, 500);
</script>

.hall-wrap {
  max-width: 100%;
  width: auto;
}

.container-chairs {
  clear: both;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.text-center {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.text-center #halls {
  display: none;
}

.header-hall-sections {
  font-family: 'Yekan';
  line-height: 230%;
  height: 220px;
  font-size: 14px;
}
.header-hall-sections .header-hall-content {
  position: relative;
  line-height: 23px;
}
.header-hall-sections h2 {
  color: #9f3a67;
  margin-bottom: 10px;
}
.header-hall-sections .date, .header-hall-sections .time {
  color: #9f3a67;
  font-size: 17px;
  margin-bottom: 5px;
}
.header-hall-sections .btn.cancel-all {
  background: #dc3c3f;
  border: none;
  color: #fff;
  float: left;
  font-size: 14px;
  height: 33px;
  margin-top: 5px;
  padding: 9px 25px 0;
  transition: all 0.2s ease;
  opacity: 0;
  visibility: hidden;
}
.header-hall-sections .btn.cancel-all.show {
  opacity: 1;
  visibility: visible;
}

.header-hall-content .btn, .header-hall-content .btn + .btn {
  position: absolute;
  bottom: 0;
  height: 31px;
  padding: 7px 25px 0;
  background: #e6e6e6;
}
.header-hall-content .btn + .btn {
  margin-right: 103px;
  background: #009a35;
  border: 1px solid #328e4d;
  color: #fff;
}

.thumb-concert {
  margin-left: 15px;
  float: right;
  border: 1px solid #c8c8c6;
  padding: 2px;
  height: 176px;
  width: 176px;
}

.header-hall {
  width: 100%;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  margin-top: 15px;
  white-space: nowrap;
}
.header-hall:after {
  content: "";
  display: table;
  clear: both;
}
.header-hall li {
  padding: 5px 33px 5px 0;
  float: right;
  margin-left: 25px;
}
.header-hall li.seat-disabled {
  background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -82px;
}
.header-hall li.seat-reserved {
  background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -20px;
}
.header-hall li.seat-ready {
  background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -51px;
}
.header-hall li.seat-selected {
  background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -113px;
}
.header-hall li.seat-sold {
  background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% 11px;
}

.ticket-filed {
  line-height: 23px;
  color: #333;
}
.ticket-filed label {
  color: #111;
}

.chairs {
  text-align: center;
  padding: 30px 0;
  margin: auto;
  display: table;
}

.chairs .row {
  clear: both;
  display: block;
  white-space: nowrap;
}

.chairs .row span {
  float: right;
  display: block;
  position: relative;
  margin: 4px;
  width: 25px;
  height: 21px;
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  padding: 0;
  text-align: center;
}

.chairs .row a {
  float: right;
  display: block;
  position: relative;
  margin: 4px;
  width: 25px;
  height: 21px;
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  text-decoration:none;
  padding: 0;
  text-align: center;
  
}

.chairs .row a.seat-ready, .chairs .row a.active {
  cursor: pointer;
}
.chairs .row span.seat-ready:hover, .chairs .row span.active:hover {
  font-weight: bold;
}
.chairs .row span.seat-ready:hover .chairs-tooltip, .chairs .row span.active:hover .chairs-tooltip {
  font-weight: normal;
  opacity: 1;
  visibility: visible;
  transition: 0.2s;
}
.chairs .row span.row-number {
  color: #444;
}
.row-name {
    font-size: 13px !important;
    font-weight: bold;
    height: 23px;
    position: absolute;
    right: 10%;
    text-align: center;
    width: 40px;
}
.chairs .row span input[type="checkbox"] {
  position: absolute;
  width: 28px;
  height: 21px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  z-index: -1;
}

.chairs .row-number{
	z-index: 10;
}
.chairs .seat-disabled {
  background: url('http://tik8.com/assets/user/img/chair5.png') no-repeat 0 0;
  color: #e6e6e6;
}

.chairs .seat-reserved {
  background: url('http://tik8.com/assets/user/img/chair2.png') no-repeat 0 0;
  color: #666666;
}

.chairs .seat-ready {
  background: url('http://tik8.com/assets/user/img/chair4.png') no-repeat 0 0;
  color: white !important;
}
.chairs .seat-ready.active {
  background: url('http://tik8.com/assets/user/img/chair6.png') no-repeat 0 0;
  color: white;
}

.chairs .seat-sold {
  background: url('http://tik8.com/assets/user/img/chair1.png') no-repeat 0 0;
  color: gray;
}

.seat-ready > input[type="text"] {
    background-color: #6eab2b;
    border: medium none;
    color: white;
    display: block;
    height: 15px !important;
    opacity: 1;
    padding: 0;
    text-align: center;
    width: 20px !important;
     z-index: 100px;
}

a.seat-ready {
    background-color: #6eab2b;
    border: medium none;
    color: white;
    display: block;
    height: 15px;
    opacity: 1;
    padding: 0;
    text-align: center;
    /*width: 20px !important; */
 	z-index: 100px;
}

.edit-label{
	padding: 0px;
}
.edit-label input[type="text"] {
    background-color: white;
    border: 1px solid black;
    height: 15px !important;
    opacity: 1;
    padding: 0;
    text-align: center;
    width: 25px !important;
    z-index: 100px;
    color: black;
}
.seat-ready.active input[type="text"]{
	background-color: transparent;
	color: white;
}

a.seat-ready.active {
	background-color: transparent;
	color: white;
}

.left-1 {
  padding-right: 16px;
}

.left-2 {
  padding-right: 32px;
}

.left-3 {
  padding-right: 48px;
}

.left-4 {
  padding-right: 64px;
}

.left-5 {
  padding-right: 80px;
}

.left-6 {
  padding-right: 96px;
}

.left-7 {
  padding-right: 112px;
}

.left-8 {
  padding-right: 128px;
}

.left-9 {
  padding-right: 144px;
}

.left-10 {
  padding-right: 160px;
}

.left-11 {
  padding-right: 176px;
}

.left-12 {
  padding-right: 192px;
}

.chairs-tooltip {
  position: absolute;
  top: 135%;
  visibility: hidden;
  opacity: 0;
  width: 190px;
  left: -81px;
  text-align: right;
  text-shadow: none;
  z-index: 99;
  white-space: pre-line;
}
.top .chairs-tooltip {
  top: auto;
  bottom: 135%;
}
.top .chairs-tooltip:after, .top .chairs-tooltip:before {
  bottom: auto;
  top: 100%;
}
.top .chairs-tooltip:after {
  border-bottom-color: transparent;
  border-top-color: white;
}
.top .chairs-tooltip:before {
  border-bottom-color: transparent;
  border-top-color: #d9d9d9;
}

/*--------------------------------------------------*\
	Nice Tooltip
\*--------------------------------------------------*/
#cvi_tooltip {
  display: none;
  position: absolute;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px 8px;
  color: #000;
  max-width: 300px;
  min-width: 30px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
#cvi_tooltip:after, #cvi_tooltip:before {
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  top: 100%;
  content: "";
  height: 0;
  width: 0;
  z-index: 2;
}
#cvi_tooltip:after {
  border-top-color: white;
  border-width: 8px;
  left: 50%;
  margin-left: -8px;
}
#cvi_tooltip:before {
  border-top-color: #d9d9d9;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}
.right-1{
	padding-right:16px
}

.right-2{
	padding-right:32px
}

.right-3{
	padding-right:48px
}

.right-4{
	padding-right:64px
}

.right-5{
	padding-right:80px
}

.right-6{
	padding-right:96px
}

.right-7{
	padding-right:112px
}

.right-8{
	padding-right:128px
}

.right-9{
	padding-right:144px
}

.right-10{
	padding-right:160px
}

.right-11{
	padding-right:176px
}

.right-12{
	padding-right:192px
}
.content {
   position: relative;
}
.top {
position: static;
width: 100%;
}

<div class="hall-wrap">
    <section class="container-chairs">
        <section class="content">
            <div class="chairs">
                <div class="row right-2">
                    <span class="row-number">1</span>
                    <a href="" class="seat-ready">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <a href="" class="seat-ready">4</a>
                    <a href="" class="seat-ready">5</a>
                    <a href="" class="seat-ready">6</a>
                    <a href="" class="seat-ready">7</a>
                    <a href="" class="seat-ready">8</a>
                    <span class="offset"></span>
                    <span class="offset"></span>
                    <span class="row-number">1</span>
                </div>
                <div class="row right-1">
                    <span class="row-number">2</span>
                    <a href="" class="seat-ready">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <a href="" class="seat-ready">4</a>
                    <a href="" class="seat-ready">5</a>
                    <a href="" class="seat-ready">6</a>
                    <a href="" class="seat-ready">7</a>
                    <a href="" class="seat-ready">8</a>
                    <a href="" class="seat-ready">9</a>
                    <span class="offset"></span>
                    <span class="row-number">2</span>
                </div>
                <div class="row right-2">
                    <span class="row-number">3</span>
                    <a href="" class="seat-ready">1</a>
                    <span class="seat-sold">2</span>
                    <span class="seat-sold">3</span>
                    <span class="seat-sold">4</span>
                    <span class="seat-sold">5</span>
                    <span class="seat-sold">6</span>
                    <a href="" class="seat-ready">7</a>
                    <a href="" class="seat-ready">8</a>
                    <span class="offset"></span>
                    <span class="offset"></span>
                    <span class="row-number">3</span>
                </div>
                <div class="row right-2">
                    <span class="row-number">4</span>
                    <a href="" class="seat-ready">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <a href="" class="seat-ready">4</a>
                    <span class="seat-disabled">5</span>
                    <span class="seat-disabled">6</span>
                    <span class="seat-disabled">7</span>
                    <span class="seat-disabled">8</span>
                    <span class="seat-disabled">9</span>
                    <span class="offset"></span>
                    <span class="row-number">4</span>
                </div>
                <div class="row right-2">
                    <span class="row-number">5</span>
                    <a href="">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <span class="seat-disabled">4</span>
                    <span class="seat-disabled">5</span>
                    <span class="seat-disabled">6</span>
                    <span class="seat-disabled">7</span>
                    <span class="seat-disabled">8</span>
                    <span class="offset"></span>
                    <span class="offset"></span>
                    <span class="row-number">5</span>
                </div>
                <div class="row right-1">
                    <span class="row-number">6</span>
                    <a href="" class="seat-ready">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <a href="" class="seat-ready">4</a>
                    <a href="" class="seat-ready">5</a>
                    <a href="" class="seat-ready">6</a>
                    <a href="" class="seat-ready">7</a>
                    <a href="" class="seat-ready">8</a>
                    <a href="" class="seat-ready">9</a>
                    <span class="offset"></span>
                    <span class="row-number">6</span>
                </div>
                <div class="row right-2">
                    <span class="row-number">7</span>
                    <a href="" class="seat-ready">1</a>
                    <a href="" class="seat-ready">2</a>
                    <a href="" class="seat-ready">3</a>
                    <a href="" class="seat-ready">4</a>
                    <a href="" class="seat-ready">5</a>
                    <a href="" class="seat-ready">6</a>
                    <a href="" class="seat-ready">7</a>
                    <a href="" class="seat-ready">8</a>
                    <span class="offset"></span>
                    <span class="offset"></span>
                    <span class="row-number">7</span>
                </div>
        </section>
    </section>
</div>

亚历克斯

我想我会猜你在找什么。也许它像这样。

注意：js仅用于生成html，这与您使用的html非常相似。

var HALL_DATA = [
		/* 0=offset, 1=ready, 2=sold, 3=disabled */
		[1,1,1,1,1,1,1,1,0,0], //1
		[1,1,1,1,1,1,1,1,1,0], //2
		[1,2,2,2,2,2,1,1,0,0], //3
		[1,1,1,1,3,3,3,3,3,0], //4
		[1,1,1,3,3,3,3,3,0,0], //5
		[1,1,1,1,1,1,1,1,1,0], //6
		[1,1,1,1,1,1,1,1,0,0]  //7
		
	];
	var SEAT_CLASSES = ['offset', 'seat-ready', 'seat-sold', 'seat-disabled'];
	var seatTemplate = '<a href="#" class="{SEAT_CLASS}">{SEAT_NR}</a>';
	var rowTemplate = '<div id="row-{ROW_NR}" class="row">{ROW_CONTENT}</div>';

	function getHallContent() {
		var html = '';
		for(i=0; i<HALL_DATA.length; i++) {
			html += rowTemplate.replace('{ROW_CONTENT}',getRowContent(i)).replace('{ROW_NR}',i+1);
			console.log()
		}
		return html;
	}
	function getRowContent(theIndex) {
		rowHtml = '';
		rowData = HALL_DATA[theIndex];
		for(j=0; j<rowData.length; j++) {
			var seatClass = SEAT_CLASSES[rowData[j]],
				seatNr = j+1; //cause j is index
			rowHtml += seatTemplate.replace('{SEAT_CLASS}',seatClass).replace('{SEAT_NR}',seatNr);
		}
		return rowHtml;
	}

	$(document).ready(function() {
		$('.hall-wrap').html(getHallContent());        
	});

.hall-wrap {
    display:table;
    width:100%;
    max-width:200px;
}
.row {
    display:table-row;
}
.row a {
    display:table-cell;
    color:#333;
    text-decoration:none;
    width:20px;
    height:20px;
    font-family:sans-serif;
    text-align:center;
    line-height:20px;
}
.seat-ready {
    background: #89CC45;
}
.seat-sold {
    background: #C93E41;
}
.seat-disabled {
    background: #C2C5CF;
}
a.offset {
    background:transparent;
    color:transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hall-wrap"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-30

我来说两句

0 条评论

登录后参与评论

上一篇：iOS应用程序中的Apple Maps使用免费吗？

使用js向元素添加宽度

使用js向元素添加宽度

隐藏发件人没有短信PHP

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

用日期数据透视表和日期顺序查询

flask-admin 如何自定义删除按钮

在浏览器中请求URL时会发生什么？

材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

为什么PlusShare.Builder setRecipients方法不起作用？

OS X-为什么我需要打开WiFi才能确定最近的位置

在Windows 7中无法删除文件（2）

android 背部按下

Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象

PyQt4.QtCore模块无法向sip模块注册

用白色图像隐藏Android Studio中的所有textView

为什么随机森林中的平均降低基尼系数取决于人口规模？

应用发明者仅从列表中选择一个随机项一次

正则表达式，用于查找所有以任何字母开头和数字开头的文件

ArgumentError：错误＃2109：在场景默认设置中未找到默认的帧标签

sshd AllowGroups组未授予访问权限

jQuery无限滚动固定div中的滚动

无法加载文件或程序集System.Runtime.CompilerServices.Unsafe

Jqgrid：多级别组摘要