動態改變選擇器文本

我有一個'下一步'按鈕，淡出一個div，顯示另一個，改變了一個圖形，然後...我希望它改變'下一個'按鈕的實際ID，但都不是.html也沒有replaceWith似乎工作。動態改變選擇器文本

我有這樣的：

$(document).ready(function(){ 
$('#portfolio').fadeTo(500,0.25); 
    $('#account') 
    .animate({width:"10.1875em",height:"11.1875em",duration:'medium'}); 

    $('#next2_btn').click(function(){ 
    $('#content').fadeTo(300, 0.0, function() { 
    $('#content2').show(300, function() { 
    $('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">') 

    $('#account').fadeTo(500,1.0) 
    .animate({marginLeft:"220px", width:"2em",'height' :"2em",duration:'medium'}) 
    .animate({ 
        marginLeft:"400px", 
        marginTop:"35px", 
        width:"7em", 
        height:"7em", 
     duration:"medium" 
        }, 'medium', 'linear', function() { 
        $('#statusGraphic').replaceWith('<img src="state2_138x28.gif">'); 
        }) 
    .fadeTo(500,0.5); 

    $('#portfolio') 
    .fadeTo(500,1.5) 
    .animate({marginLeft:"-175px", width:"2em",height:"2.5em",duration:'medium'}) 
    .animate({marginLeft:"-330px", width:"8.5em",height:"9.9375em",duration:'medium'}); 
    }); 
     }) 
    })

來源

2010-06-09 kelly

這部分是奇數：

$('#next2_btn'.value)

的問題很可能在那裏...

來源

2010-06-09 15:23:47 Koen

也許@Kelly來自PHP其中'.'把兩個字符串，在這種情況下更換它帶有'+'，你可能已經破解了這個案子！ – gnarf 2010-06-09 15:27:57

我不知道我理解的完整機制你想完成什麼，但這是無效的：

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

這會要求jQuery先查找＃next2_btn元素（即$('#next2_btn')），然後嘗試對結果調用.$()函數。該功能不存在。

此外，表達式'#next2_btn'.value試圖訪問也不存在的字符串'#next2_btn'的.value屬性。

所以我們有兩個錯誤在中間位置浮動，每個錯誤都足以使整個陳述脫軌。

也許你的意思是：

$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">');

這只是找到#next2_btn並設置裏面的HTML是<area>標籤。這僅在#next2_btn是除和input以外的元素纔有效。如果它是input，則不能更改其HTML;您只能使用.val('...')方法更改其值。（或與.replaceWith()方法完全取代它。）

來源

2010-06-09 15:25:11 VoteyDisciple

如果你使用'replaceWith（）'而不是'html（）'，第二個例子可能是正確的。 @Kelly確實提到了嘗試這個功能......你應該進一步強調'$（'＃next2_btn'）。$（...）'的無效性 - 它可能會導致$（'＃next2_btn'）。 $'不是函數錯誤... – gnarf 2010-06-09 15:30:02

我猜測這是應該改變的ID行（這是無效）：

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

這裏被改變的工作示例測試並確認在Firefox，Chrome和IE8中工作的地圖區域的id屬性（您需要將1.jpg圖像複製到包含此代碼的.html文件的位置才能看到它的工作）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
    <script src="jquery-1.4.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#next2_btn').click(function() { 
       // find current element 
       var element = $(this); 

       // get id 
       var id = element.attr('id'); 

       // find the number portion of the id using regular expressions 
       var findNumberRegex = /next(\d+)_btn/; 
       var idNumber = parseInt(id.replace(findNumberRegex, "$1")); 

       // increment the number 
       idNumber++; 

       // re-assign the area id 
       element.attr('id', 'next' + idNumber + '_btn'); 
      }); 

      $('#showAreaId').click(function() { 
       alert('current id of area is ' + $('map[name="Map"]').find('area').attr('id')); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <img src="1.jpg" usemap="#Map" width="300" height="300" /> 
    <map name="Map"> 
     <area shape="rect" coords="0,0,300,300" id="next2_btn" alt="next2_btn" href="#" /> 
    </map> 
    <button id="showAreaId">Show current ID of area</button> 
</body> 
</html>

請注意，下面的行可能不會完全符合您的要求 - 一旦運行，#statusGraphic將不再存在。

$('#statusGraphic').replaceWith('<img src="state2_138x28.gif">');

我不知道是什麼類型的元素#statusGraphic的，但如果它已經是一個形象，你可以這樣做：

$('#statusGraphic').attr('src', 'state2_138x28.gif');

如果不是已經是一個圖像，也許追加圖像而不是：

$('#statusGraphic').append('<img src="state2_138x28.gif" />');

以後可以去除：

$('#statusGraphic').empty();

來源

2010-06-09 15:26:46

對不起，我發佈了一些「測試」代碼......該行不在那裏。

我想更改鏈接的ID，以便我可以再次使用該鏈接，只加載其他內容。所以，我的HTML是：

<map name="Map"> 
<area shape="rect" coords="826,935,906,971" id="next2_btn" href="#"> 
</map>

，他們單擊此之後，以前的代碼運行褪色現有的DIV，顯示隱藏的一個，和三個圖形啓動一定的動畫。所以，在那之後，我想讓id改變，這樣我就可以編寫新的動畫並用相同的鏈接替換圖形。這是爲了避免刷新。

所以，我只是想看看是否有可能更改鏈接上的初始ID。我首先嚐試通過選擇div並重寫上面看到的整個html。然後，我嘗試選擇ID並使用上面建議的屬性，但沒有任何工作。

感謝

來源

2010-06-09 19:50:09

我讓你成爲一個工作示例（在我上面的回答中）更改區域標記的ID - 檢查出來。使用.attr（）更改ID肯定有效，但不確定哪些內容適合您。希望這個例子會有所幫助。 – 2010-06-09 20:49:52

謝謝Nate，它確實幫助我！ – 2010-06-10 03:20:52

的ID不改變，它只是中的代碼已經被分配到元素，無論價值及其未來的id ..

你應該使用活法click事件綁定..

$('#next2_btn').live('click', function(){ 
      ../*code for the button with id next2_btn which will change the id of the clicked element to anotherID*/... 
      // at some point run the following command 
      $(this).attr('id','anotherID'); 
}); 
$('#anotherID').live('click', function(){../*code that will run from elements that have #anotherID no matter when they get this id*/...});

檢查一個活生生的例子在這裏：http://www.jsfiddle.net/6mFht/

來源

2010-06-09 20:19:15

動態改變選擇器文本

回答

相關問題