Jquery динамический текстовый эффект / проблема класса - PullRequest
Новая
       0

Jquery динамический текстовый эффект / проблема класса

0 голосов
/ 21 декабря 2010

У меня есть HTML-файл, содержащий таблицу с несколькими строками и столбцами. каждая строка содержит кнопку, которая имеет некоторые функции. Во-первых, он должен отправить данные подряд в файл php, который ничего не печатает. Затем кнопка должна изменить свой текст и текст в столбце 5 соответствующей строки. Эффект изменения текста кнопки работает хорошо. Но эффект изменения текста в столбце 5 содержит ошибки. Меняется только текст столбца 5 в первом ряду, независимо от того, какую кнопку вы нажимаете.

Заранее спасибо:)

бластеральфред 

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>  
.style1 {  
    background-color: #c3d9ff;  
    font-family:arial,sans-serif;  
}  
.style2 {  
    text-align: center;  
    font-weight: bold;  
}  
.style3 {  
    background-color: #FFFFFF;  
    font-family:arial,sans-serif;  
    text-align: center;  
    font-weight: bold;  
}  
body {  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:15px;  
background-color: ;  
}  
.delete_button {  
font-weight:bold;  
float:right;  
}  
</style>

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(function()  
{  
    $(".delete_button").click(function()  
    {  
    var id = $(this).attr("id");  
    var dataString = 'id='+ id ;  
    var parent = $(this).parent().parent();  
    $.ajax({  
        type: "POST",  
        url: "del.php",  
        data: dataString,  
        cache: false,  
        success: function()  
        {  
            if(id % 2)  
            {  
                parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});  
            }  
            else  
            {  
                parent.fadeOut('fast', function()   {$(this).fadeOut();$(this).fadeIn();});  
            }  
        }  
    });  
    return false;  
    }  
);});  
$(document).ready(function() {  
  $('.delete_button').click(function() {  
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');  
    $("#clickme2").text($("#clickme2").text() == 'Inactive' ? 'Active' : 'Inactive');  
    return false;  
});  
});  
</script>
</head>  
<body>  
<table style="width: 90%" align="center" class="style1">
<tr>  
        <td colspan="7" class="style2">MANAGER</td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">column1</td>  
        <td class="style3" style="width: 139px">column2</td>  
        <td class="style3" style="width: 139px">column3</td>  
        <td class="style3" style="width: 139px">column4</td>  
        <td class="style3" style="width: 139px">column5</td>  
        <td class="style3" style="width: 144px">column6</td>  
        <td class="style3" style="">Action</td>  
    </tr>  
        <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>
</table>
</body>

Ответы [ 2 ]

1 голос
/ 21 декабря 2010

у вас есть ошибка в вашем javascript 

$(document).ready(function() {
$('.delete_button').click(function() {
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
    $("#clickme2").text($("#clickme2").text() == 'Inactive' ? 'Active' : 'Inactive');/*you are giving same id to all rows in 5 th column and selecting it*/
    return false;
    });
});

Вы должны удалить идентификатор отсюда 

 <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>

и изменить ваш javascript на

, затем в youjavascript 

    $(document).ready(function() {
$('.delete_button').click(function() {
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
        $(this).closest("td").prev().prev().text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
    return false;
    });
});

но я не уверен насчет запроса ajax

1 голос
/ 21 декабря 2010

Вы используете идентификатор несколько раз ( это недопустимо и не разрешено в спецификациях HTML ). Когда вы нацеливаетесь на это, вы всегда получаете только первый.

Используйте clickme2 в качестве класса вместо идентификатора и нацеливайте его из обработчика щелчков следующим образом 

$(this).closest('tr').find('.clickme2').text(...);

Кроме того, удалите атрибут div из тегов td, поскольку он также не существует.

Пример на http://www.jsfiddle.net/gaby/23KEW/

...