[AJAX]Dodawanie i usuwanie znacznika <b> w Jquery Opcje

[northwest]

Witam serdecznie,
Mam następujący link (docelowo mam ich więcej):

[HTML] pobierz, plaintext 
<a class="setmes1" href="abc.html" >O mnie</a>
[HTML] pobierz, plaintext 

chciałbym po kliknięciu w powyższy link uzyskać następujący efekt:

[HTML] pobierz, plaintext 
<b><a class="setmes1" href="abc.html" >O mnie</a></b>
[HTML] pobierz, plaintext 

W jaki sposób można to zrobić?

Kombinowałem coś takiego:

[HTML] pobierz, plaintext 
$(".setmes2").html("<b>");
$( "<b>" ).insertAfter( ".setmes2" );
$(".setmes2").prepend("<b>");
[HTML] pobierz, plaintext 

Ale niestety nie dało efektu jaki chciałem Ma ktoś może pomysł jak to rozwiązać?

Bardzo proszę o pomoc,
Northwest

[markuz]

[JAVASCRIPT] pobierz, plaintext 
$('.setmes1').click(function() {
    $(this).css('font-weight', 'bold');
    return false;
});
[JAVASCRIPT] pobierz, plaintext 

Nie lepiej tak?

Ten post edytował markuz 4.06.2014, 16:52:17

[northwest]

tylko to dodaje style = "font-weight:bold" - a ja potrzebuję dodać fizycznie <b> i </b> przed tym linkiem

[markuz]

[JAVASCRIPT] pobierz, plaintext 
$('.setmes1').click(function() {
    $(this).wrap('<b></b>');
    return false;
});
[JAVASCRIPT] pobierz, plaintext 

Dałem Ci poprzednią odpowiedź, ponieważ nie widzę sensu dodania znacznika <b> w innym celu niż pogrubienie.

Ten post edytował markuz 4.06.2014, 17:20:56

[northwest]

dziękuję, działa a jak usunąć potem takie pogrubienie??

[HTML] pobierz, plaintext 
$('.setmes2').click(function() {
                $(this).wrap('<b></b>');
                $('.setmes1').unwrap('<b></b>');
                $('.setmes3').unwrap('<b></b>');
                $('.setmes4').unwrap('<b></b>');
                $('.setmes5').unwrap('<b></b>');
                $('.setmes6').unwrap('<b></b>');
                $('.setmes7').unwrap('<b></b>');
                return false;
            });
[HTML] pobierz, plaintext 

coś takiego psuje mi menu :-(

[markuz]

Po pierwsze - po Co ci klasy od setmes1 do setmes7? Jak już bardzo Ci to potrzebne to dodaj jeszcze jedną klasę o nazwie np. bwrap tzn.

[HTML] pobierz, plaintext 
<a class="setmes1 bwrap" href="abc.html" >O mnie</a>
<a class="setmes2 bwrap" href="abc.html" >Coś tam</a>
[HTML] pobierz, plaintext 

Po drugie - Chcesz najpierw dodać a potem usunąć - dzięki czemu nie zauważysz różnicy... Może chcesz za pierwszym kliknięciem dodać <b> a za drugim usunąć?

[JAVASCRIPT] pobierz, plaintext 
$('.bwrap').click(function() {
    if($(this).parent().nodeName.toLowerCase() === 'b') {
        $(this).unwrap('<b></b>');
    } else {
        $(this).wrap('<b></b>');
    }
});
[JAVASCRIPT] pobierz, plaintext 

Ciekawi mnie cel w jakim to robisz - może się nim z nami podzielisz?

Ten post edytował markuz 4.06.2014, 18:22:25

[northwest]

dziękuję za pomoc Podany kod jednak nie działa

Tak, dokładnie. Mam menu na stronie z 7 pozycjami. Po kliknięciu na każdą chce pogrubić tą aktualną - i usunąć pogrubienie z tych wcześniej wybranych.

[markuz]

http://jsfiddle.net/czMn4/

[northwest]

dziękuję, ale to jest znowu z CSS - a nie "b"

Może pokaże mój kod:

[HTML] pobierz, plaintext 
<a class="setmes1 bwrap" href="a.html" >1</a>
<a class="setmes2 bwrap" href="a.html"  >2</a>
<a class="setmes3 bwrap" href="a.html" >3</a>
<a class="setmes4 bwrap" href="a.html"  >4</a>
<a class="setmes5 bwrap" href="a.html">5</a>
<a class="setmes6 bwrap" href="a.html" >6</a>
<a class="setmes7 bwrap" href="a.html"  >7</a>
[HTML] pobierz, plaintext 

Po kliknięciu chce wyczyścić wszystkie linki z "<b>" i "</b>" + zaznaczyć tylko i wyłącznie link który został kliknięty.
Przykładowo klikam link nr 5 i otrzymuję:

[HTML] pobierz, plaintext 
<a class="setmes1 bwrap" href="a.html" >1</a>
<a class="setmes2 bwrap" href="a.html"  >2</a>
<a class="setmes3 bwrap" href="a.html" >3</a>
<a class="setmes4 bwrap" href="a.html"  >4</a>
<a class="setmes5 bwrap" href="a.html">5</a>
<a class="setmes6 bwrap" href="a.html" >6</a>
<a class="setmes7 bwrap" href="a.html"  >7</a>
[HTML] pobierz, plaintext 

[ziolo]

[JAVASCRIPT] pobierz, plaintext 
$('.bwrap').click(function() {
    $('.bwrap').each(function(){
      if($(this).parent().nodeName.toLowerCase() === 'b') 
        $(this).unwrap();
    });
    $(this).wrap('<b></b>');
});
[JAVASCRIPT] pobierz, plaintext 

A coś takiego ?

Ten post edytował ziolo 4.06.2014, 19:24:12

[northwest]

zwraca błąd:
TypeError: $(...).parent(...).nodeName is undefined
if($(this).parent().nodeName.toLowerCase() === 'b')

[ziolo]

Teraz będzie ok.

[JAVASCRIPT] pobierz, plaintext 
    $('.bwrap').click(function(e) {
     e.preventDefault();
      $('.bwrap').each(function(){
        if($(this).parent().prop('nodeName').toLowerCase() === 'b')
          $(this).unwrap();
        });
      $(this).wrap('<b></b>');
    });
[JAVASCRIPT] pobierz, plaintext 

Edit.

Usuń e.preventDefault();

Ten post edytował ziolo 4.06.2014, 20:35:29

[northwest]

dziękuję za pomoc - pomogło

mam jeszcze jedno pytanie, chciałbym żeby w momencie gdy $_GET['luk'] == 2 - automatycznie klikała się zakładka odpowiednia + wyświetlał się odpowiedni iframe...

zrobiłem taki kod:

[PHP] pobierz, plaintext 
$(document).ready(function(){
$(".setmes2").trigger('click');
});
[PHP] pobierz, plaintext 

Skrypt poprawnie oznacza <b> i </b> - klikniętą pozycję (czyli funkcja $('.bwrap').click - działa poprawnie) - jednak
w iframe nie wyświetla się poprawna treść...

Macie może pomysł co jest nie tak??

Ten post edytował northwest 13.06.2014, 14:38:10