操纵图像大小

这个div有4张图片。设置图像的尺寸为100px。我想要的是，当这些图片被点击时，我想让它们增加到300px。

我的html

<button id="first1" class="secondary tip ng-binding" data-hover="Supports FAQ Single Operator " ng-click="select_chat_type('1')" ng-class="{'button-selected': data.chat_type=='1'}">Chat Box FAQ<br>
<img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listchat11.png?v=1623415967">
</button>
<button id="first2"  class="secondary tip ng-binding" data-hover="Single Operator,When clicked whatsapp app will be launched" ng-click="select_chat_type('2')" ng-class="{'button-selected': data.chat_type=='2'}">Direct Whatsapp <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/directcchat.png?v=1623416104">
</button>
<button id="first3"  class="secondary tip ng-binding button-selected" data-hover="Multi Operator Supported Here,List Sales, Support, Technical etc department. Timers will work here for Online &amp; Offline" ng-click="select_chat_type('3')" ng-class="{'button-selected': data.chat_type=='3'}">List Departments + On:Off<br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listdepppttt.png?v=1623416352"></button>
<button id="first4"  class="secondary tip" data-hover="Single Operator,Small Chat box,Plz adjust width" ng-click="select_chat_type('4')" ng-class="{'button-selected': data.chat_type=='4'}">Baby Chat <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/babychat11.png?v=1623416725"></button>

我正在使用这个代码递增类

.increasesize {
width: 100px;
}
.increasesize.clicked {
width: 300px;
}

有时有效，有时不有效。

我想要的是当任何按钮被点击时所有其他按钮都应该回到100px被点击的按钮应该是300px

我想用jquery来做这件事。我们为每个按钮添加了id。我们可以这样做

$('#first1,#first2,#first3,#first4').click(function(event) 
{ 
var idpiiu = $(this).attr('id');
$("#"+idpiiu).width( 300 );
//   $("#first1").width( 300 );
$("#first2,first3,first4").width( 100 );
});

但是我必须对所有其他id重复相同的操作。我相信一定有更好的办法我是这样想的。我应该解决这个问题。

您的代码中缺少多个#

你也应该切换另一个，所以你减少所有的宽度，然后设置所单击的元素的宽度。

你也可以用$('div[id^=first]')代替$('#first1,#first2,#first3,#first4')。这将选择id以first

开头的所有div元素。

$('#first1,#first2,#first3,#first4').click(function(event) {
$('#first1,#first2,#first3,#first4').width(100);
$(this).width(300);
});

$('#first1,#first2,#first3,#first4').click(function(event) {
$('#first1,#first2,#first3,#first4').width(100);
$(this).width(300);
});

.increasesize {
width: 100px;
}
.increasesize.clicked {
width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="first1" class="secondary tip ng-binding" data-hover="Supports FAQ Single Operator " ng-click="select_chat_type('1')" ng-class="{'button-selected': data.chat_type=='1'}">Chat Box FAQ<br>
<img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listchat11.png?v=1623415967">
</button>
<button id="first2" class="secondary tip ng-binding" data-hover="Single Operator,When clicked whatsapp app will be launched" ng-click="select_chat_type('2')" ng-class="{'button-selected': data.chat_type=='2'}">Direct Whatsapp <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/directcchat.png?v=1623416104">
</button>
<button id="first3" class="secondary tip ng-binding button-selected" data-hover="Multi Operator Supported Here,List Sales, Support, Technical etc department. Timers will work here for Online &amp; Offline" ng-click="select_chat_type('3')" ng-class="{'button-selected': data.chat_type=='3'}">List Departments + On:Off<br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listdepppttt.png?v=1623416352"></button>
<button id="first4" class="secondary tip" data-hover="Single Operator,Small Chat box,Plz adjust width" ng-click="select_chat_type('4')" ng-class="{'button-selected': data.chat_type=='4'}">Baby Chat <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/babychat11.png?v=1623416725"></button>

如果您有很多元素，我建议使用class。它使代码更简单。

$('.image-click').click(function(event) {
$('.image-click').width(100)
$(this).width(300)
});

$('.image-click').click(function(event) {
$('.image-click').width(100)
$(this).width(300)
});

.increasesize {
width: 100px;
}
.increasesize.clicked {
width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="first1" class="image-click secondary tip ng-binding" data-hover="Supports FAQ Single Operator " ng-click="select_chat_type('1')" ng-class="{'button-selected': data.chat_type=='1'}">Chat Box FAQ<br>
<img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listchat11.png?v=1623415967">
</button>
<button id="first2"  class="image-click secondary tip ng-binding" data-hover="Single Operator,When clicked whatsapp app will be launched" ng-click="select_chat_type('2')" ng-class="{'button-selected': data.chat_type=='2'}">Direct Whatsapp <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/directcchat.png?v=1623416104">
</button>
<button id="first3"  class="image-click secondary tip ng-binding button-selected" data-hover="Multi Operator Supported Here,List Sales, Support, Technical etc department. Timers will work here for Online &amp; Offline" ng-click="select_chat_type('3')" ng-class="{'button-selected': data.chat_type=='3'}">List Departments + On:Off<br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listdepppttt.png?v=1623416352"></button>
<button id="first4"  class="image-click secondary tip" data-hover="Single Operator,Small Chat box,Plz adjust width" ng-click="select_chat_type('4')" ng-class="{'button-selected': data.chat_type=='4'}">Baby Chat <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/babychat11.png?v=1623416725"></button>

demo jsfiddle: https://jsfiddle.net/pw1d6k98/

你可以试试这样

<div class="nav">
<button id="first1" class="secondary tip ng-binding" data-hover="Supports FAQ Single Operator " ng-click="select_chat_type('1')" ng-class="{'button-selected': data.chat_type=='1'}">Chat Box FAQ<br> <img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listchat11.png?v=1623415967"></button>
<button id="first2"  class="secondary tip ng-binding" data-hover="Single Operator,When clicked whatsapp app will be launched" ng-click="select_chat_type('2')" ng-class="{'button-selected': data.chat_type=='2'}">Direct Whatsapp <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/directcchat.png?v=1623416104"></button>
<button id="first3"  class="secondary tip ng-binding button-selected" data-hover="Multi Operator Supported Here,List Sales, Support, Technical etc department. Timers will work here for Online &amp; Offline" ng-click="select_chat_type('3')" ng-class="{'button-selected': data.chat_type=='3'}">List Departments + On:Off<br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/listdepppttt.png?v=1623416352"></button>
<button id="first4"  class="secondary tip" data-hover="Single Operator,Small Chat box,Plz adjust width" ng-click="select_chat_type('4')" ng-class="{'button-selected': data.chat_type=='4'}">Baby Chat <br><img class="increasesize" src="https://cdn.shopify.com/s/files/1/0033/3538/9233/files/babychat11.png?v=1623416725"></button> 
</div>

li.active {
color: red;
}

button .increasesize {
width: 100px;
}

button.clicked .increasesize {
width: 300px;
}

var selector = '.nav button';        
$(selector).on('click', function(){
$(selector).removeClass('clicked');
$(this).addClass('clicked');
});

如果代码没有在这里运行，打开这个https://codepen.io/sam-123/pen/qBmgjRm

相关内容

最新更新

热门标签：