<div class="screen">
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");"/>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");"/>
</div>我想点击某个div 获取被点 title中的 Photo Gallery 的值
<script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>这个是我写的，获取不到，请教一下各位
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");"/>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");"/>
</div>我想点击某个div 获取被点 title中的 Photo Gallery 的值
<script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>这个是我写的，获取不到，请教一下各位
“我想点击某个div 获取被点 title中的 Photo Gallery 的值”？？？？
<div class="screen">
<div title="Photo Gallery" class="icon" style="background-image: url('assets/img/icons/Photos.png');"> </div>
<div title="Google Maps" class="icon" style="background-image: url('assets/img/icons/Maps.png');"> </div>
</div>
这样试试看
js这么写应该可以
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");">Photo Gallery</div>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");">Google Maps</div>
</div>这样 是可以的
<div title="Photo Gallery" class="a">aaaa</div>
<div title="Google Maps" class="b">bbbb</div>
</div>
<script type="text/javascript">
$(function(){
$("#c .a").click(function(){ $a=$(this);
$b=$a.attr("title");
alert($b); }) })
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<link rel="stylesheet" href="assets/css/styles.css" />
<script type="text/javascript" src="assets/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-1.3.1.js"></script>
<!-- <script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<script type="text/javascript">
$(".icon").click(function () {
alert($(this).attr("title"));
})
</script>
</div>
</div>
<ul id="indicators"></ul>
<div id="dock"></div>
</section>
<!-- JavaScript includes -->
<script type="text/javascript" src="assets/js/touchable.js"></script>
<script type="text/javascript" src="assets/js/coffee-script.js"></script>
<script type="text/coffeescript">
# The Icon class.
class Icon
# The constructor. The -> arrow signifies
# a function definition.
constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
# @up holds the HTML of the icon. It is
# transformed to this.up behind the scenes.
@up = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)' title='#{@title}'>ffff</div>"
# The DockIcon class inherits from Icon
class DockIcon extends Icon
constructor: (id, title)->
# This calls the constructor if Icon
super(id, title)
# Changing the class name of the generated HTML
@up = @up.replace("class='icon'","class='dockicon'")
# The Screen Class
class Screen
# Function arguments can have default parameters
constructor: (icons = [])->
@icons = icons
attachIcons: (icons = [])->
Array.prototype.push.apply(@icons, icons)
generate: ->
up = []
# Looping through the @icons array
up.push(icon.up) for icon in @icons
# The last line of every function is implicitly returned
"<div class='screen'>#{up.join('')}</div>"
class Stage
# The width of our "device" screen. This is
# basically the width of the #mask div.
screenWidth: 332
constructor: (icons)->
@currentScreen = 0
@screens = []
# Calculating the number of screens
# necessary to display all the icons
num = Math.ceil(icons.length / 9)
i = 0
while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
addScreensTo: (element)->
@element = $(element)
@element.width(@screens.length*@screenWidth)
for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
@ul = $(elem)
for screen in @screens
@ul.append('<li>')
@ul.find('li:first').addClass('active');
goTo: (screenNum)->
# This method animates the allScreen div in
# order to expose the needed screen in #mask
if @element.is(':animated')
return false
# if this is the first or last screen,
# run the end of scroll animation
if @currentScreen == screenNum
# Parallel assignment:
[from, to] = ['+=15','-=15']
if @currentScreen != 0
[from, to] = [to, from]
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
else
# If everything is ok, animate the transition between the screens.
# The fat arrow => preserves the context of "this"
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
if toShow == @screens.length
toShow = @screens.length - 1
@goTo(toShow)
previous: ->
toShow = @currentScreen-1
# If there is no previous screen,
# show the current one
if toShow == -1
toShow = 0
@goTo(toShow)
# This is equivalent to $('document').ready(function(){}):
$ ->
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
]
dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')
]
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:
dock = $('#dock')
for icon in dockIcons
dock.append(icon.up)
</script>
</body>
</html>不知道是不是Jquery 冲突了，请大家帮瞧瞧
var kk = $(this).attr("title");估计和页面的<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>冲突了
var kk = $(“#div”).attr("title");指定处理的具体div
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
alert(kk);
})
})
</script>可是这样总是拿到第一个值 Photo Gallery 为什么呢？
<script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
alert(kk);
})
})
</script> <style type="text/css">
.icon
{
color: Red;
}
</style> <div>
<div title="PhotoGallery" class="icon">
dvzvc</div>
<div title="GoogleMaps" class="icon"">
vzxvc</div>
</div>