I've got this really strange issue with the first part of this function.
function selectDesc(idToIgnore, text, desc) {
//Switch button text
$('.ctext').html($('.ctext').html() === 'Less <b>‹</b>' ? 'More <b>›</b>' : 'Less <b>‹</b>');
//Animate the profile showings so they dont look janky either way
if ($(desc).is(':hidden')) {
$('.profiles').not(idToIgnore).hide(1000, function() {
$(desc).show(600, function() { $(text).fadeIn(200) });
});
return
} else if ($(desc).is(':visible')) {
$(text).fadeToggle(200, function() { $(desc).toggle(600, function() { $('.profiles').not(idToIgnore).toggle(1000) }) })
return
}
'use strict';
$('.description').hide();
function selectDesc(idToIgnore, text, desc) {
// if ($(desc).is)
// $('.profiles').not(idToIgnore).toggle(1000);
$('.ctext').html($('.ctext').html() == 'Less <b>‹</b>' ? 'More <b>›</b>' : 'Less <b>‹</b>');
//Animate the profile showings so they dont look janky either way
if ($(desc).is(':hidden')) {
$('.profiles').not(idToIgnore).hide(1000, function() {
$(desc).show(600, function() {
$(text).fadeIn(200)
});
});
// $('.ctext').html('Less <b>‹</b>' ? 'More <b>›</b>' : 'Less <b>‹</b>');
return
} else if ($(desc).is(':visible')) {
$(text).fadeToggle(200, function() {
$(desc).toggle(600, function() {
$('.profiles').not(idToIgnore).toggle(1000)
})
})
return
}
// $(desc).toggle(1000, function() { $(text).fadeToggle(400); });
};.button {
border: 1px black;
border-radius: 3px;
width: 50px;
height: 30px;
display: inline-block;
background: linear-gradient(to right, #1ED761 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.type2 {
border: 1px black;
border-radius: 3px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 3.2px;
padding-bottom: 3.2px;
height: auto;
display: inline-block;
background: linear-gradient(to right, #1ED761 50%, #e9ecef 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.button:hover {
background-position: left bottom;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="card" class="profiles" style="width: 18rem;">
<div class="button type2 btn-Name" onclick="selectDesc('#card','#text', '#desc');">
<div class="ctext">More <b>›</b></div>
</div>
</div>
<div id="desc" class="description">
<span>
<h3 id="text" class="description"> Description </h3>
</span>
</div>
</body>
</html>This function is called on click with about 4 buttons. The first line is supposed to switch the button's text depending on what it is currently (all the buttons have the same class, so I don't have to add a bunch of identifiers for the same thing) but it only works one time. While inspecting the buttons, it shows the yellow "something is happening" highlights on the buttons, but they never change after the first time. I'm not really sure what the issue is, it seemed to have been working before but just broke when I added theif/else if code (used to be just a one liner, but it made the text freak out on closing). I'm really new to jQuery and JavaScript in general, so I might be missing something obvious, but I'm just completely stumped. Any help would be greatly appreciated!
Tldr: first line in the function will only change the text one time, although showing it is doing something when inspecting the buttons every single time.
Edit: Here's a fiddle with chopped up bits of my website, same button problem exists https://jsfiddle.net/2L1dbzk5/5/
CodePudding user response：
It looks like there was a problem with your ternary operator and what you were comparing it to. When you console.log($('.ctext').html());, you may notice that it doesn't actually return Less <b>‹</b> or More <b>›</b>. It is actually returning Less <b>‹</b> and More <b>‹</b> I changed that ternary operator to use that form of ‹ and ‹ instead and it looks like it works from what you asked for:
'use strict';
$('.description').hide();
function selectDesc(idToIgnore, text, desc) {
// if ($(desc).is)
// $('.profiles').not(idToIgnore).toggle(1000);
console.log($('.ctext').html(), $('.ctext').html() == 'Less <b>‹</b>');
$('.ctext').html($('.ctext').html() == 'Less <b>‹</b>' ? 'More <b>›</b>' : 'Less <b>‹</b>');
//Animate the profile showings so they dont look janky either way
if ($(desc).is(':hidden')) {
$('.profiles').not(idToIgnore).hide(1000, function() {
$(desc).show(600, function() {
$(text).fadeIn(200)
});
});
// $('.ctext').html('Less <b>‹</b>' ? 'More <b>›</b>' : 'Less <b>‹</b>');
return
} else if ($(desc).is(':visible')) {
$(text).fadeToggle(200, function() {
$(desc).toggle(600, function() {
$('.profiles').not(idToIgnore).toggle(1000)
})
})
return
}
// $(desc).toggle(1000, function() { $(text).fadeToggle(400); });
};.button {
border: 1px black;
border-radius: 3px;
width: 50px;
height: 30px;
display: inline-block;
background: linear-gradient(to right, #1ED761 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.type2 {
border: 1px black;
border-radius: 3px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 3.2px;
padding-bottom: 3.2px;
height: auto;
display: inline-block;
background: linear-gradient(to right, #1ED761 50%, #e9ecef 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.button:hover {
background-position: left bottom;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="card" class="profiles" style="width: 18rem;">
<div class="button type2 btn-Name" onclick="selectDesc('#card','#text', '#desc');">
<div class="ctext">More <b>›</b></div>
</div>
</div>
<div id="desc" class="description">
<span>
<h3 id="text" class="description"> Description </h3>
</span>
</div>
</body>
</html>