Question

我需要点击jQuery更改图标，从加号到减号，使用切换类现在我有问题，点击后所有“span”改变了图标。

// FAQ
$('#content-in > article > div > ul > li > p').hide();
$('#content-in > article > div > ul > li > h3').click(function(e) {
  e.preventDefault();
  // skrýt všechny spany
  var $this = $(this).parent().find('p');
  $('#content-in > article > div > ul > li > p').not($this).hide();
  // rozjetí textu
  $this.toggle("fast", "swing");

  // obarvení pozadí + další změny po kliknutí a rozjetí (u ostatních elementů se tato vlastnost neaplikuje)
  var tittle = $("#content-in > article > div > ul > li > h3");
  $(tittle).toggleClass('activeLol');
  $(tittle).not(this).removeClass('activeLol');

  var $plus_minus = $('#content-in > article > div > ul > li > h3 > span');
  $plus_minus.toggleClass('fa-minus').toggleClass('fa-plus');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="Accordion mt30">
  <li class="Accordion-item">
    <h3 class="Accordion-item-title" style="text-align: left;"><span class="fa fa-plus"> </span>1. Pokud je vybrané zboží momentálně ve statusu objednáno u dodavatele či vyprodáno, co to znamená ?</h3>
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu objednáno u dodavatele, bohužel není k dispozici. Produkty jsou objednány u našeho italského dodavatele s tím, že čekáme na jejich výrobu a následnou dopravu do České republiky. Dodací lhůta je však různě odlišná,
      zpravidla 2-3 týdny (v některých případech může být delší).</p>
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu vyprodáno, je bohužel dlouhodobě nedostupné s tím, že jeho naskladnění zatím nemáme potvrzeno.</p>
  </li>
  <li class="Accordion-item">
    <h3 class="Accordion-item-title"><span class="fa fa-plus"> </span>2. Pokud si objednám zboží, které je momentálně skladem, jaká je dodací lhůta ?</h3>
    <p class="Accordion-item-content" style="display: none;">Při objednání produktů, které jsou na našich webových stránkách „Skladem“ je dodací lhůta zpravidla dva až čtyři pracovní dny.</p>
  </li>
</ul>

Answer 1

问题是因为您选择了所有h3 span元素。相反，您可以使用DOM遍历通过在单击事件处理程序中使用h3关键字来查找与单击的this相关的那个。试试这个：

var $plus_minus = $(this).find('span').toggleClass('fa-minus fa-plus');
$('h3 span').not($plus_minus).removeClass('fa-minus').addClass('fa-plus');

Answer 2

获取点击元素的相对图标

if (count($_FILES) > 0)
{
    // initialize check and Error output
    $ok = true;
    $_SERVER['error_message'] = '';

    // check count of uploads is ok
    if (count($_FILES) != 6 || !in_array(array_keys($_FILES), 'image'))
    {
        $_SERVER['error_message'] .= 'too few files uploaded<br />';
        $ok = false;
    }

    // if still ok check all uploads
    if ($ok) foreach ($_FILES as $name => $myFile)
    {
        // keep false so $ok &&
        $ok = $ok && checkfile($name, $myFile)
    }

    // if still ok upload all files
    if ($ok) foreach ($_FILES as $name => $myFile)
    {
        // No need for basename as the name will only be the filename (the path is not submitted by uploading a file - maybe to check php reference if it is )
        move_uploaded_file($myFile["tmp_name"], 'uploads/'.$_SESSION['username'].'_'.$myFile["name"]);
    }
}
function checkfile($name, $myFile)
{
    // check general uploaderrors
    switch ($myFile['error'])
    {
        case UPLOAD_ERR_OK:
    break;
        case UPLOAD_ERR_NO_FILE:
            $_SERVER['error_message'] .= $name . ' contains no file<br />';
            return false;
    break;
        case UPLOAD_ERR_INI_SIZE:
        case UPLOAD_ERR_FORM_SIZE:
            $_SERVER['error_message'] .= $name . ' exceeded filesize<br />';
            return false;
    break;
        default:
            $_SERVER['error_message'] .= $name . ' unknown errors in fileupload<br />';
            return false;
    break;
    }

    // check minimum filesize (here 0)
    if ($myFile['size'] <= 0) $_SERVER['error_message'] .= $name . ' need to be larger than 0 bytes<br />';

    // check each filetype and "unknown" uploads like having a otherfile25 that is not expected from the form
    switch ($name)
    {
        case 'image':
            if (!in_array(substr($myFile['name'], -4), array('.png', '.jpg'))
            {
                $_SERVER['error_message'] .= $name . ' need to a png or jpg image<br />';
                return false;
            }
    break;
        case 'file1':
        case 'file2':
        case 'file3':
        case 'file4':
        case 'file5':
            if (!in_array(substr($myFile['name'], -4), array('.xls'))
            {
                $_SERVER['error_message'] .= $name . ' need to a xls file<br />';
                return false;
            }
    break;
        default:
            $_SERVER['error_message'] .= 'unknown file ' . $name . '<br />';
            return false;
    break;
    }
    return true;
}

$('#content-in > article > div > ul > li > h3').click(function(e) {
  e.preventDefault();
$('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus');//change all classes to fa-plus
$(this).find('span').toggleClass('fa-minus fa-plus');//change the current one 
});

// FAQ
$('ul > li > p').hide();
$(' ul > li > h3').click(function(e) {
  e.preventDefault();
  // skrýt všechny spany
  var $this = $(this).parent().find('p');
  $('ul > li > p').not($this).hide();
  // rozjetí textu
  $this.toggle("fast", "swing");

  // obarvení pozadí + další změny po kliknutí a rozjetí (u ostatních elementů se tato vlastnost neaplikuje)
  var tittle = $(" ul > li > h3");
  $(tittle).toggleClass('activeLol');
  $(tittle).not(this).removeClass('activeLol');

  var $plus_minus = $(' ul > li > h3 > span');
  $('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus'); //change all classes to fa-plus
  $(this).find('span').toggleClass('fa-minus fa-plus'); //change the current one 
});

点击后更改图标（其他图标不更改）

2 个答案: