Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Jquery, поменять иконку (https://javascript.ru/forum/misc/65725-jquery-pomenyat-ikonku.html)

r1pt1d3 04.11.2016 17:36
Jquery, поменять иконку
 
Добрый вечер, сижу ломаю голову, не могу понять элементарную вещь.
Когда закрываю открытое окно, то иконка не меняется на плюс. Всё остальное работает отлично. Вот собственно код.

HTML-код:
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
			<i class="material-icons-add_circle"></i>
	       </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>



Код:
.faq_collumn{
                height: 522px;
                width: 350px;
                float: left;
                margin-left: 40px;
        }
        .faq_info{
                width: 350px;
                height: auto;
                min-height: 65px;
                max-height: 350px;
                border-radius: 4px;
                box-shadow: 0 0 10px rgba(0,0,0,0.6);
                background-color: #FF4538;
                float: left;
                margin-bottom: 40px;
                cursor: pointer;
        }
        #faq_info_holder{
                width: 1200px;
                margin: auto;
        }
        .faq_name{
                font: 22px georgia;
                color: white;
                margin: 0;
                margin-left: 25px;
                margin-top: 20px;
        }
        .material-icons-add_circle{
                float: right;
                color: white;
                font-size: 32px;
                margin-right: 15px;
                margin-top: -4px;
        }
        .material-icons-remove_circle{
                float: right;
                color: white;
                font-size: 32px;
                margin-right: 15px;
                margin-top: -4px;
        }
        .hiden_faq{
                font: 16px georgia;
                color: white;
                float: left;
                margin-left: 25px;
                margin-right: 55px;
                margin-bottom: 20px;
                display: none;
        }
        .active{
                background: #DD3C30;
        }

И непосредственно Jquery:

$(".faq_info").click(function(){

		$(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");

		if ($(".faq_info").hasClass("active")){
			$(".faq_info").not(this).removeClass("active").find(".hiden_faq").slideUp("normal");

			$(".faq_info").find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle");
		}

		$(this).find(".material-icons-add_circle").addClass("material-icons-remove_circle").removeClass("material-icons-add_circle");


	});



P.S. док.реди прописан офк.

рони 04.11.2016 20:29
r1pt1d3,
количество классов избыточно ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .faq_collumn{
		height: 522px;
		width: 350px;
		float: left;
		margin-left: 40px;
	}
	.faq_info{
		width: 350px;
		height: auto;
		min-height: 65px;
		max-height: 350px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0,0,0,0.6);
		background-color: #FF4538;
		float: left;
		margin-bottom: 40px;
		cursor: pointer;
	}
	#faq_info_holder{
		width: 1200px;
		margin: auto;
	}
	.faq_name{
		font: 22px georgia;
		color: white;
		margin: 0;
		margin-left: 25px;
		margin-top: 20px;
	}
	.material-icons-add_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-add_circle:after{
      content: "+";
    }

	.material-icons-remove_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-remove_circle:after{
      content: "-";
    }

	.hiden_faq{
		font: 16px georgia;
		color: white;
		float: left;
		margin-left: 25px;
		margin-right: 55px;
		margin-bottom: 20px;
		display: none;
	}
	.active{
		background: #DD3C30;
	}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $(".faq_info").click(function() {
        $(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");
        $(".faq_info").not(this).removeClass("active").find(".hiden_faq").slideUp("normal");
        $(".faq_info").not(this).find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle");
        if ($(this).hasClass("active")) $(this).find(".material-icons-add_circle").addClass("material-icons-remove_circle").removeClass("material-icons-add_circle");
        else $(this).find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle")
    })
});
  </script>
</head>

<body>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>

</body>
</html>

рони 04.11.2016 20:38
r1pt1d3,
смена иконки без дополнительного класса 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .faq_collumn{
		height: 522px;
		width: 350px;
		float: left;
		margin-left: 40px;
	}
	.faq_info{
		width: 350px;
		height: auto;
		min-height: 65px;
		max-height: 350px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0,0,0,0.6);
		background-color: #FF4538;
		float: left;
		margin-bottom: 40px;
		cursor: pointer;
	}
	#faq_info_holder{
		width: 1200px;
		margin: auto;
	}
	.faq_name{
		font: 22px georgia;
		color: white;
		margin: 0;
		margin-left: 25px;
		margin-top: 20px;
	}
	.material-icons-add_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-add_circle:after{
      content: "+";
    }


   .active .material-icons-add_circle:after{
      content: "-";
    }

	.hiden_faq{
		font: 16px georgia;
		color: white;
		float: left;
		margin-left: 25px;
		margin-right: 55px;
		margin-bottom: 20px;
		display: none;
	}
	.active{
		background: #DD3C30;
	}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    var info = $(".faq_info");
    info.on("click",function() {
        $(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");
        info.not(this).removeClass("active").find(".hiden_faq").slideUp("normal");
    })
});
  </script>
</head>

<body>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>

</body>
</html>

r1pt1d3 04.11.2016 20:56
Спасибо, использовал первый вариант.

"Количество классов избыточно", лучше использовать id там где классы не требуются? В чем преимущество?

рони 04.11.2016 21:24
Цитата:
Сообщение от r1pt1d3
лучше использовать id там где классы не требуются
чаще наоборот id не требуется
Цитата:
Сообщение от r1pt1d3
В чем преимущество?
2 строки скрипта без проблем с названими классов или 5 с вырви глаз


Часовой пояс GMT +3, время: 03:17.