jQuery能否使用三元运算符？替换if函数失效问题求助

Hey there! Let's break down your ternary operator issues and answer your jQuery question clearly.

一、原生JS三元运算符失效的常见原因 #

Let's start with why your vanilla JavaScript ternary approach might not be working—here are the most likely culprits:

1. Unhandled missing elements #

jQuery returns an empty jQuery object even if no elements match your selector, so it won't throw an error. But vanilla JS's querySelector returns null if it can't find the element, and calling methods like classList on null will crash your code.

Broken example:

// If .target doesn't exist, this line throws a TypeError
document.querySelector('.target').classList.contains('active') 
  ? document.querySelector('.target').classList.remove('active') 
  : document.querySelector('.target').classList.add('active');

Fixed version (cache and check for the element first):

const targetEl = document.querySelector('.target');
// Only run logic if the element exists
if (targetEl) {
  targetEl.classList.contains('active') 
    ? targetEl.classList.remove('active') 
    : targetEl.classList.add('active');
}

// Or nest a ternary to handle the null case
const targetEl = document.querySelector('.target');
targetEl ? (targetEl.classList.contains('active') ? targetEl.classList.remove('active') : targetEl.classList.add('active')) : null;

2. Syntax mistakes with multi-step operations #

The ternary operator expects expressions in its branches. If you need to run multiple actions in one branch, you need to wrap them in parentheses and use the comma operator (which runs all actions and returns the last one's value).

Broken example:

// Missing parentheses causes syntax errors
targetEl.classList.contains('active') 
  ? targetEl.classList.remove('active'), console.log("Removed class") 
  : targetEl.classList.add('active'), console.log("Added class");

Fixed version:

targetEl.classList.contains('active') 
  ? (targetEl.classList.remove('active'), console.log("Removed class")) 
  : (targetEl.classList.add('active'), console.log("Added class"));

3. Logic inversion or typos #

Double-check that your condition is correct (e.g., didn't accidentally write !contains('active') when you meant the opposite) and that class names are spelled correctly—both classList.contains() and jQuery's hasClass() are case-sensitive.

二、Yes, you absolutely can use ternary operators with jQuery #

The ternary operator is core JavaScript syntax, so it works seamlessly with jQuery. In fact, it can make your jQuery code more concise. Here are a few examples:

Basic usage #

const $target = $('.target');
$target.hasClass('active') ? $target.removeClass('active') : $target.addClass('active');

Flexible method invocation #

You can even use the ternary to pick which jQuery method to call, using bracket notation:

const $target = $('.target');
$target[$target.hasClass('active') ? 'removeClass' : 'addClass']('active');

Chained with other jQuery methods #

// Toggle a class based on another element's state using ternary
$('.target').toggleClass('active', $('.trigger').hasClass('open') ? true : false);
// Note: You could simplify this to just $('.trigger').hasClass('open'), but the ternary shows how it fits

内容的提问来源于stack exchange，提问作者S Roughton