Додайте клас до елемента з накладом javascript

Я шукаю години для вирішення і знайшов деякі відповіді, але не цілком придатний.

У мене є кілька елементів з кожним з них, включаючи один елемент . Тепер я хочу створити шаблон друку, щоб надрукувати лише ті елементи, які мають певний клас .

Питання полягає в тому, як я можу додати клас до пробілу, натиснувши на нього. Таким чином, я хочу "позначити" декілька прольотів, які потім мають базовий стиль print-css для друку лише тих, що мають певний * клас *. Важливо: . Можна натиснути кнопку (додати клас) та reclick (видалити клас) для окремих пропусків.

Дуже дякую. З повагою Мажей


його Wordpress повертають для всіх пропусків, так само ідентифікатор. в даний момент я маю цей JS включений:

<script type="text/javascript">
function changeid ()
{
var e = document.getElementById("nonprintable");
e.id = "printable";
}

</script>

і код WordPress виглядає так:

<?php
        $args = array('post_type' => 'attachment', 'post_parent' => $post->ID,  'orderby' => 'menu_order', 'order' => 'ASC'); 
                $attachments = get_children($args); 
foreach ( $attachments as $attachment_id => $attachment ) {


echo '';
           echo wp_get_attachment_image( $attachment->ID, 'large' );

      echo '';

          }


?>  

Прямо зараз, коли я натискаю проміжок, я бачу, що він змінює ідентифікатор. Але це змінює його просто зверху вниз, кожного клацання на проміжку, а не на певний проміжок я натискаю.

1
Ви можете показати свій код?
додано Автор Raptor, джерело
будь-яка причина, у вас є той же ідентифікатор для всіх прольотів?
додано Автор manraj82, джерело
Ви не можете редагувати його PHP-код, де він присвоює унікальний ідентифікатор для цього інтервалу? Ви думаєте про налаштування ідентифікаторів після того, як сторінка була відтворена? Я не думаю, що це хороша ідея, що саме ви намагаєтесь досягти
додано Автор manraj82, джерело
як описано вище, я хочу додати класи за проміжками, щоб у шаблоні друку ім'я класу вирішило, яке зображення відображатиметься, а які з них немає. Якщо у вас є якась інша пропозиція, я щаслива :)
додано Автор Mazey, джерело
Я думаю, що мені не потрібен ідентифікатор. "Клас" потрібен лише для шаблону друку. Замість "ідентифікатора" я хочу лише змінити стиль проміжку. Тому, коли я натискаю один, я хочу, щоб він мав кордон. Чи може хтось допомогти мені з цим?
додано Автор Mazey, джерело

6 Відповіді

ви можете використовувати

jQuery('span').click(function(){
  jQuery(this).toggleClass('yourSpecialClass');
});
5
додано
Це дозволить захопити всі проміжні елементи на сторінці, які можуть бути небажаними.
додано Автор Jeevan Jose, джерело
Привіт, спасибі спочатку. На жаль, це не працює :( Моє налаштування, описане вище, працює, за винятком того, що він просто змінює ідентифікацію в послідовності, а не просто на проміжку, я натискаю. Ось з тієї ж назви ідентифікатора, яку я знаю. Але як я можу інтегрувати $ це в моєму коді ... так що він змінює лише ідентифікатор про пропуск, який я фактично натискаю?
додано Автор Mazey, джерело

Перш за все, ви не повинні мати однаковий ідентифікатор для всіх ваших пробілів. Замість цього додайте клас до всіх таких, як це:


Тоді ви можете зробити це:

$(function(){
  $(".selectable").click(function(){
     $(this).toggleClass("selected");
  });
});

І тоді у вашій функції

function getAllSelected(){
   var selected = $(".selected");//This will give you all the selected elements.
}
1
додано
    <div class="items">
        Click Item 1    
        Click Item 2  
        Click Item 3  
    </div>

   <div class="btn-getSelectedItems">Get Selected Items</div>

   $(function(){
        $('.items .item').click(function(){
            $(this).toggleClass('selected');
        })

       $('.btn-getSelectedItems').click(function(){
         if($('.items .selected').length){
            console.log($('.items .selected'))
         }
       })
    })
0
додано

Додайте обробник onclick та перейдіть до класів CSS:

JS:

function addClass(obj) {
    obj.className ? obj.className = "" : obj.className = "test";
}

CSS:

.test {
    color: red;
}

HTML Span:

Click me!

Demo: http://jsfiddle.net/yXWcW/1/

Редагування: не бачив тег jQuery, використовуйте для цього toggle Class .

0
додано
Якщо ви хочете додати id , ви можете виконати obj.id = "newId" ; пам'ятайте, ідентифікатори повинні бути унікальними.
додано Автор tymeJV, джерело
Ви були близькі, оскільки ви також маєте jQuery, використовуйте $ (obj) .css ({border: "5px solid # E3E3E3", margin: "5px", display: "inline-block"))
додано Автор tymeJV, джерело
Thx, я працював зараз.
додано Автор Mazey, джерело
Привіт, у мене є додаткове запитання. Як це зробити, якщо я хочу додати "id" замість "class"? Дякую.
додано Автор Mazey, джерело
Привіт ще раз. Не могли б ви допомогти додавати тег style = "" до пробілу натискання? Ви вже пробували з функцією addClass (obj) {obj.className? obj.className = "": obj.className = "noprint"; obj.css ({border: "5px solid # E3E3E3", маржа: "5px", дисплей: "inline-block"});} але його не працює. Дякую.
додано Автор Mazey, джерело

міг використати наступне

$("span").click(function() {
   if($(this).hasClass("classname"))
   {
      $(this).removeClass("classname");
   }
   else
   {
      $(this).addClass("classname");
   }

});
0
додано

Ви можете це зробити


додав "цей" до аргументів

і ваша функція буде

<script type="text/javascript">
function changeid (e){//added e to accepted arguments
    e.id = "printable";
    //e is the element so you are only changing that one elements id
}
</script>

або ви можете просто використовувати jQuery's .toggleClass

Click me!

Оскільки у вас є кілька екземплярів (я рекомендую класи, а не ідентифікатори)

$('#same-id-for-all-spans').click(function(){

    $(this).toggleClass('your-classname');

});

Ось документ jQuery для .toggleClass ()

http://api.jquery.com/toggleClass/

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram