1

私はインタラクティブな大学のキャンパスマップの設計に取り組んでおり、私がやろうとしていることについて何らかの方向性が必要です。

ページへのリンク：http：//www.torontoclassfind.com/startpage.html

トップメニューのリンクをクリックして（これまでにアクティブなリンクは1つだけで、左下のdivにAjaxページが読み込まれます）、建物の画像を別の画像と交換して、選択されていることを示したいです。 。

私は次のようにそれを行うことができます：

$("#buildinglink1").click(function () {
   $("#buildingimg1").attr("src","highlightedimage.gif")
})

問題は、別のメニューリンクをクリックして新しい建物を選択したら、画像をデフォルトの画像に戻す必要があることです。

建物の画像はwww.torontoclassdfind.com/building/にあり、強調表示された画像はwww.torontoclassdfind.com/buildingc/にあり、建物の名前は両方の場所で同じです。

JQueryの.replace要素を使用してこれを行うことを考えています（例：jqueryはURLの一部を削除します）。これにより、URLに「c」が削除または追加されますが、ここからは少し迷っています。

任意のヒント？リンクが選択されていることを示す関数を作成し、それを.replace要素とマージする必要があると思います。

4

2 に答える 2

0

注意:.replaceは JavaScript 文字列 (およびその他) メソッドであり、jQuery メソッドではありません。

あなたは次のようなことを求めていると思います：

$(".any-building").click(function () {
   //replace all building sources with the unhighlighted version
   $(".any-building").attr('src', function () {
      return $(this).attr('src').replace('buildingc', 'building');
   });

   //replace clicked image with highlighted one
   $(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});

考えられる欠点は、画像が多い場合、このスワップに時間がかかるか、ちらつきが発生する可能性があることです。その場合は.active、強調表示された画像などにクラスを追加し、その画像と新しくクリックされた画像のみを交換することができます。

于 2012-12-16T23:17:18.120 に答える
0

jQuery でよくある学習ミスは、すべてのタイプのセレクターの ID に注目することです。それらは非常に少数の要素に対してはうまく機能しますが、単純なコード メソッドで簡単に管理できる要素の大きなグループに対しては非常に扱いにくくなります。

ページ内で同じ機能を共有するすべてのリンクを 1 つのハンドラーでカバーする、はるかに汎用的なコードを記述できるようにしたいと考えています。

例：

var $mainImage=$('#mainImage')

var $buildingLinks=$('.buildingliststyle a').click(function(){
      /* "this" is the link clicked*/
       /* get index of this link in the whole collection of links*/
       var index=$buildingLinks.index(this);
      /* perhaps all the image urls are stored in an array*/
      var imgUrl= imagesArray( index);
      /* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
       var imgUrl=$(this).data('image');
      /* store the current image on display (not clear how page is supposed to work)*/
      var currImage=$mainImage.attr('src');

       $mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
       /* nw update main image*/
       $mainImage.attr('src', imgUrl);

       /* load ajax content for this link*/
       $('#ajaxContainer').load( $(this).attr('href') );

      /* avoid browser following link*/
       return false;                
});

 /* button to reset main image from data we already stored*/  
$('#imageResetButton').click(function(){
   $mainImage.attr('src',  $mainImage.data('lastImage') );
})

1 つのハンドラーで要素のグループを操作することで、非常に少ないコードで多くのことを実行でき、ID に集中する必要がないことがわかります。

上記のコードは、次のようなデータ属性に画像の URL を保存する可能性について言及しています。

<a href="ajaxUrl?id=345" data-buildingID="345" data-image="imageUrl-345">Building name</a>
于 2012-12-16T23:21:35.653 に答える